/* =========================================================================
   SpedireWeb — Design System 2.0
   -------------------------------------------------------------------------
   Loaded LAST by layouts/app.blade.php, layouts/public.blade.php and
   layouts/guest.blade.php. This is the single source of truth for colour,
   typography, spacing and component treatment across the whole platform.

   Why it is built as a final override layer: the project carries ~4 MB of
   historical CSS (nedate-design-system, theme-arancio, blade-views, …) whose
   selectors cannot be safely removed. Rather than fight it file by file, this
   layer redefines the shared design tokens — including --theme-primary and
   --theme-secondary, which most legacy rules already consume — so the bulk of
   the platform recolours coherently, and then restyles the components that
   hardcode their own values.

   Palette rationale: the brand mark is a coral red (#fe5054) and the stored
   theme primary is #f53324. The previous layer forced blue/cyan on the home
   page while theme-arancio.css kept orange on pricing/FAQ/tracking, so the
   site read as three different products. Everything now derives from one
   vermilion + deep navy pair, with the red deepened to #d92336 for actions so
   white label text clears WCAG AA (4.95:1).

   Sections
     01 Tokens              08 Hero system (shared)
     02 Base & typography   09 Home page
     03 Layout & container  10 Pricing / FAQ / tracking / contact
     04 Navigation          11 Auth
     05 Buttons             12 Footer
     06 Forms               13 App shell, tables, admin
     07 Surfaces            14 Responsive · motion · print
   ========================================================================= */


/* =========================================================================
   01 · TOKENS
   ========================================================================= */

:root {
  /* Brand — vermilion, anchored on the logo hue */
  --sw-brand-50:  #fff2f2;
  --sw-brand-100: #ffe3e4;
  --sw-brand-200: #ffc9cc;
  --sw-brand-300: #ffa1a6;
  --sw-brand-400: #fb6c75;
  --sw-brand-500: #f04651;   /* logo tone — graphics, large display only */
  --sw-brand-600: #d92336;   /* actions — white text = 4.95:1 */
  --sw-brand-700: #b5172a;   /* hover / pressed */
  /* Ink that sits ON a brand fill. White here (4.95:1 on brand-600); in dark
     mode the fill is lifted to #f0525f, where white drops to 3.46:1 and only
     a near-black clears AA. Declared next to every brand fill so the pair
     always flips together. */
  --sw-on-brand:  #fff;
  /* Stesso patto per le altre due tinte piene: al chiaro il bianco tiene
     (5,02 sul giallo, 5,79 sull'azzurro), al buio no — misurato 1,67 e
     2,54 — perche' li' la tinta diventa chiara. Dichiarati qui e ribaltati
     nel blocco scuro, come si fa gia' per il rosso del marchio. */
  --sw-on-warning: #fff;
  --sw-on-info:    #fff;
  --sw-brand-800: #901324;
  --sw-brand-900: #6d0f1c;

  /* Navy — structural chrome, dark sections, footer */
  --sw-navy-950: #070e1c;
  --sw-navy-900: #0c1729;
  --sw-navy-850: #102038;
  --sw-navy-800: #152b48;
  --sw-navy-700: #1e3a5a;    /* matches the stored --theme-secondary */
  --sw-navy-600: #2b5080;
  --sw-navy-500: #3d6a9f;

  /* Neutrals */
  --sw-ink:         #0e1b2e;  /* headings            — 16.2:1 on white */
  --sw-body:        #46566d;  /* body copy           —  7.5:1 on white */
  --sw-muted:       #617087;  /* secondary / labels  —  5.0:1 on white, 4.6:1
                                 on the lightest surface it lands on (#f0f4f9),
                                 so muted copy clears AA on every background */
  --sw-faint:       #94a3b8;  /* decorative only, never for prose */
  --sw-line:        #e4e9f0;
  --sw-line-strong: #cfd8e4;
  --sw-canvas:      #f6f8fb;
  --sw-surface:     #ffffff;
  --sw-surface-2:   #f0f4f9;
  --sw-surface-3:   #e8eef6;

  /* Ink for use on navy / brand backgrounds */
  --sw-on-dark:         #f4f8fd;
  --sw-on-dark-body:    rgba(229, 238, 250, .80);
  --sw-on-dark-muted:   rgba(229, 238, 250, .62);
  --sw-on-dark-line:    rgba(255, 255, 255, .12);
  --sw-on-dark-surface: rgba(255, 255, 255, .06);

  /* Status. --sw-success reads as an icon/accent green on light surfaces;
     --sw-success-fill is the darker step used when it becomes a filled badge,
     because white on #0f8a5f is only 4.36:1 and badge text is normal size. */
  --sw-success:      #0d7d55;   /* era #0f8a5f: 4.36:1 su bianco, sotto AA */
  --sw-success-fill: #0d7d55;   /* white on this = 5.14:1 */
  --sw-success-bg:   #e6f6ef;
  --sw-warning:    #b45309;
  --sw-warning-bg: #fdf3e3;
  --sw-danger:     #c81e32;
  --sw-danger-bg:  #fdecee;
  --sw-danger-ring: rgba(200, 30, 50, .20);
  /* velo del caricamento a tutto schermo: era scritto a mano nel markup */
  --sw-overlay:     rgba(255, 255, 255, .85);
  /* #1e6fd9 su #eaf2fd faceva 4,30:1 misurato: la pastiglia `sw-state--go`
     e' testo piccolo, e sotto 4,5 non ci sta. Sceso a #1a63c4 -> 5,13:1, e
     anche `.badge.bg-info` (bianco sopra) passa da 4,85 a 5,79. Colore
     praticamente uguale a vederlo. */
  --sw-info:       #1a63c4;
  --sw-info-bg:    #eaf2fd;

  /* Type */
  --sw-font-display: "Archivo", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sw-font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sw-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Le etichette dei campi hanno una voce loro: Poppins, geometrica, con le
     maiuscole larghe e tonde che il micro-testo regge bene. Self-hosted come
     le altre due (400/500/600, subset latin, in /fonts/) — nessuna chiamata
     a Google. */
  --sw-font-label:   "Poppins", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Only 500/600/700 of Archivo and 400/500/600 of Plex Sans are self-hosted.
     Asking for 800/900 makes the browser synthesise a smeared faux-bold, which
     is what made the old headings look blurry. These caps are deliberate. */
  --sw-weight-thin:        100;
  --sw-weight-extra-light: 200;
  --sw-weight-light:       300;
  --sw-weight-normal:      400;
  --sw-weight-medium:      500;
  --sw-weight-semi:        600;
  --sw-weight-bold:        700;
  --sw-weight-extra-bold:  800;
  --sw-weight-black:       900;

  /* Fluid display scale */
  --sw-text-display: clamp(2.25rem, 1.35rem + 2.9vw, 3.6rem);
  --sw-text-h1:      clamp(1.95rem, 1.3rem + 2.1vw, 2.95rem);
  --sw-text-h2:      clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  --sw-text-h3:      clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  --sw-text-h4:      1.125rem;
  --sw-text-lead:    clamp(1rem, .96rem + .22vw, 1.125rem);
  --sw-text-body:    1rem;
  --sw-text-sm:      .9375rem;
  /* In px, non in rem: con `html` a 14px un .8125rem dipinge 11,4px, e questo
     token e' il fondo della scala — etichette, unita', didascalie, micro-testi.
     Gli scalini sopra restano in rem: alzare anche `sm` lo avrebbe schiacciato
     sul corpo del testo (entrambi a 14px) invece di dare aria alla scala. */
  --sw-text-xs:      12.5px;

  /* Space */
  --sw-space-1: .25rem;
  --sw-space-2: .5rem;
  --sw-space-3: .75rem;
  --sw-space-4: 1rem;
  --sw-space-5: 1.5rem;
  --sw-space-6: 2rem;
  --sw-space-7: 3rem;
  --sw-space-8: 4rem;
  --sw-section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);

  /* Radius */
  --sw-radius-xs: 8px;
  --sw-radius-sm: 10px;
  --sw-radius-md: 14px;
  --sw-radius-lg: 18px;
  --sw-radius-xl: 24px;
  --sw-radius-pill: 999px;
  /* Il raggio dei campi: 5px, non i 10 del raggio generico. Sta qui e non
     accanto agli altri token del campo perche' il piede della pagina, che un
     campo ce l'ha, vive fuori dal <main>. */
  --sw-field-radius: 5px;
  /* Dove sta l'icona dentro il campo e dove comincia il testo. Scritte una
     volta sola perche' le usano tre impalcature diverse — il campo normale,
     la tendina fiscale e il campo-bottone della nazione — e prima ognuna si
     portava dietro il suo numero. Con la radice a 14px: 18,9px e 39,9px. */
  --sw-field-icon-x: 1.35rem;
  --sw-field-text-x: 2.85rem;

  /* Elevation — tinted with the navy so shadows sit in the palette */
  --sw-shadow-xs: 0 1px 2px rgba(12, 23, 41, .06);
  --sw-shadow-sm: 0 2px 4px rgba(12, 23, 41, .04), 0 6px 16px rgba(12, 23, 41, .06);
  --sw-shadow-md: 0 4px 8px rgba(12, 23, 41, .05), 0 14px 34px rgba(12, 23, 41, .09);
  --sw-shadow-lg: 0 8px 16px rgba(12, 23, 41, .06), 0 28px 64px rgba(12, 23, 41, .13);
  --sw-shadow-brand: 0 8px 22px rgba(217, 35, 54, .26);

  /* ombra COMPLETA, non un colore: si usa come `box-shadow: var(--sw-focus-ring)`.
     Prima era dichiarata due volte (qui e piu' su come semplice rgba) e chi
     la leggeva come colore scriveva un'ombra non valida. */
  --sw-focus-ring: 0 0 0 3px rgba(217, 35, 54, .28);
  --sw-focus-ring-dark: 0 0 0 3px rgba(255, 140, 150, .40);

  /* Motion */
  --sw-ease: cubic-bezier(.4, 0, .2, 1);
  --sw-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sw-dur-fast: .15s;
  --sw-dur: .22s;
  --sw-dur-slow: .38s;

  /* Shell metrics */
  --sw-nav-height: 72px;
  /* Lo stacco fra il bordo basso della barra fissa e la prima cosa della
     pagina, sul telefono. Misurato su /tariffe, che e' il riferimento: 16,5px.
     Era ricopiato come numero dentro le singole pagine — /spedizioni lo aveva
     sommato a mano (72,5px), il portale degli sviluppatori ne aveva 14. */
  --sw-bar-gap-mobile: 16.5px;
  /* Stessa larghezza della barra in alto: cosi' il contenuto delle pagine
     comincia esattamente sotto il logo invece che 100px piu' dentro (home)
     o 75px piu' fuori (tracking). Misurato a 1920px. */
  --sw-container: 1440px;
  --sw-container-wide: 1440px;
  --sw-gutter: clamp(1rem, .4rem + 2vw, 2.5rem);

  /* --- Bridge to the legacy variables the rest of the CSS already reads --- */
  --theme-primary: var(--sw-brand-600);
  --theme-primary-hover: var(--sw-brand-700);
  --theme-secondary: var(--sw-navy-700);
  --theme-bg: var(--sw-canvas);
  --theme-footer-bg: var(--sw-navy-950);
  --theme-footer-heading: var(--sw-on-dark);
  --theme-footer-text: var(--sw-on-dark-body);
  --theme-navbar-bg: var(--sw-navy-950);
  --theme-navbar-text: var(--sw-on-dark);
  --theme-font-base: var(--sw-font-body);
  --nd-public-red: var(--sw-brand-600);
  --nd-brand-button-radius: var(--sw-radius-sm);
  /* Read by the (3,14,3) text rules in nedate-unified.css — see section 11.
     Setting them here means every <small>, lead and label in the app inherits
     the system's ink instead of that file's hardcoded #68778d (4.4:1). */
  --sw-ink-body: var(--sw-body);
  --sw-ink-small: var(--sw-muted);
  --sw-ink-label: var(--sw-muted);
  --bs-primary: var(--sw-brand-600);
  --bs-primary-rgb: 217, 35, 54;
  --bs-body-color: var(--sw-body);
  --bs-body-font-family: var(--sw-font-body);
  --bs-border-color: var(--sw-line);
  --bs-link-color: var(--sw-brand-700);
  --bs-link-hover-color: var(--sw-brand-800);
}

/* Dark mode — matches the specificity of the inline ThemeManager block
   (html[data-theme="dark"]) and wins by load order. */
html[data-theme="dark"],
html body.dark-mode {
  --sw-ink:         #eef4fc;
  --sw-body:        #b6c4d6;
  --sw-muted:       #8fa1b8;
  --sw-faint:       #6b7d94;
  --sw-line:        #1d2c42;
  --sw-line-strong: #2a3d57;
  --sw-canvas:      #070e1c;
  --sw-surface:     #0e1a2c;
  --sw-surface-2:   #142339;
  --sw-surface-3:   #1b2d47;

  --sw-brand-600: #f0525f;   /* lifted for contrast on dark surfaces */
  --sw-brand-700: #ff6b76;
  /* The two soft tints are surfaces, never ink (checked: no rule uses them as
     `color`). Left at their light values they became light pills on a dark
     page, and since the ink above is lifted the pair collapsed to light-on-
     light — the "Tariffe trasparenti" kicker measured 2.53:1. */
  --sw-brand-50:  #24121a;
  --sw-brand-100: #43202b;
  --sw-on-brand:  var(--sw-navy-950);   /* on #f0525f = 5.58:1 */
  --sw-on-warning: var(--sw-navy-950); /* sopra #fbbf24: il bianco faceva 1,67:1 */
  --sw-on-info:    var(--sw-navy-950); /* sopra #60a5fa: il bianco faceva 2,54:1 */

  --sw-success:    #34d399;
  --sw-success-bg: #0c2a20;
  --sw-warning:    #fbbf24;
  --sw-warning-bg: #2c210a;
  --sw-danger:     #fb7185;
  --sw-danger-bg:  #2d1017;
  --sw-danger-ring: rgba(251, 113, 133, .26);
  --sw-overlay:     rgba(7, 14, 28, .84);
  --sw-info:       #60a5fa;
  --sw-info-bg:    #0e1f38;

  --sw-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sw-shadow-sm: 0 2px 4px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .34);
  --sw-shadow-md: 0 4px 8px rgba(0, 0, 0, .34), 0 14px 34px rgba(0, 0, 0, .42);
  --sw-shadow-lg: 0 8px 16px rgba(0, 0, 0, .38), 0 28px 64px rgba(0, 0, 0, .5);
  --sw-focus-ring: var(--sw-focus-ring-dark);

  --theme-primary: var(--sw-brand-600);
  --theme-primary-hover: var(--sw-brand-700);
  --theme-bg: var(--sw-canvas);
  --bs-primary: var(--sw-brand-600);
  --bs-primary-rgb: 240, 82, 95;
}

/* --- The public-page palette bridge -------------------------------------
   Four stylesheets each ship their own marketing palette, and the winner on a
   public page is nedate-page-system's `body.nedate-public-standard` block —
   which is why the home page stayed blue while pricing/FAQ/tracking stayed
   orange no matter what :root said. Re-pointing those variables here, at a
   specificity that clears every definition site, recolours the whole public
   surface from one place instead of rule by rule.

     nedate-page-system  body.nedate-public-standard   (0,1,1)
     nedate-unified      :root / html[data-theme]      (0,1,0) / (0,1,1)
     theme-arancio       :root / [data-theme] .dark-mode
     theme-waybill       :root / [data-theme] .dark-mode           */
html body.nedate-public-standard,
html body.nedate-marketing-standard,
html body.nedate-public-ui {
  --nd-public-red: var(--sw-brand-600);
  --nd-public-orange: var(--sw-brand-500);
  --nd-public-navy: var(--sw-navy-800);
  --nd-public-navy-2: var(--sw-navy-700);
  --nd-public-muted: var(--sw-muted);
  --nd-public-bg: var(--sw-canvas);
  --nd-public-border: var(--sw-line);
  --nd-public-radius-md: var(--sw-radius-lg);
  --nd-public-radius-lg: var(--sw-radius-xl);
  --nd-public-shadow: var(--sw-shadow-lg);
  --nd-public-sticky-nav-h: var(--sw-nav-height);
  --nav-h: var(--sw-nav-height);
  --nd-page-radius: var(--sw-radius-lg);

  --faq-red: var(--sw-brand-600);
  --faq-orange: var(--sw-brand-500);
  --faq-ink: var(--sw-ink);
  --faq-muted: var(--sw-muted);

  --wb-link: var(--sw-brand-700);

  --theme-primary: var(--sw-brand-600);
  --theme-primary-hover: var(--sw-brand-700);
  --theme-secondary: var(--sw-navy-700);
  --theme-navbar-text: var(--sw-on-dark);

  background: var(--sw-canvas);
}

/* Dark public pages. Note that the legacy dark blocks flip --nd-public-navy
   and --faq-ink to a near-white — they are used as the ink colour there, not
   as the navy — so both follow --sw-ink rather than the navy ramp. */
html[data-theme="dark"] body.nedate-public-standard,
html[data-theme="dark"] body.nedate-marketing-standard,
html[data-bs-theme="dark"] body.nedate-public-standard,
html body.nedate-public-standard.dark-mode {
  --nd-public-red: var(--sw-brand-600);
  --nd-public-orange: var(--sw-brand-700);
  --nd-public-navy: var(--sw-ink);
  --nd-public-navy-2: var(--sw-ink);
  --nd-public-muted: var(--sw-muted);
  --nd-public-bg: var(--sw-canvas);
  --nd-public-border: var(--sw-line);

  --faq-red: var(--sw-brand-600);
  --faq-orange: var(--sw-brand-700);
  --faq-ink: var(--sw-ink);
  --faq-muted: var(--sw-muted);

  --wb-link: var(--sw-brand-700);
  --theme-primary: var(--sw-brand-600);
}

/* --- The page-wrapper layer ---------------------------------------------
   Each public page re-declares the shared --faq-* / --contact-* palette on
   its own wrapper (`body.nedate-ui-standard .pricing-modern-page` and
   friends), which sits below the body in the tree and therefore beat the
   bridge above. Most of those values already derive from --theme-primary, so
   they follow the new red on their own; the surfaces, borders and muted ink
   are pinned here so the cards match the rest of the system. */
html body.nedate-ui-standard :is(.welcome-modern-page, .pricing-modern-page, .faq-modern-page,
  .contact-modern-page, .tracking-login-page, .pricing-login-page, .faq-login-page, .login-page),
html body.nedate-ui-standard :is(.nedate-app-page, .nedate-main-container) {
  --nd-page-surface: var(--sw-surface);
  --nd-page-surface-soft: var(--sw-surface-2);
  --nd-page-bg: var(--sw-canvas);
  --nd-page-text: var(--sw-ink);
  --nd-page-muted: var(--sw-muted);
  --nd-page-border: var(--sw-line);
  --nd-page-shadow: var(--sw-shadow-md);
  --nd-page-shadow-soft: var(--sw-shadow-sm);
  --nd-page-radius: var(--sw-radius-lg);

  --faq-surface: var(--sw-surface);
  --faq-surface-soft: var(--sw-brand-50);
  --faq-border: var(--sw-line);
  --faq-text: var(--sw-ink);
  --faq-muted: var(--sw-muted);
  --faq-ink: var(--sw-ink);
  --faq-red: var(--sw-brand-600);
  --faq-orange: var(--sw-brand-500);
  --faq-shadow: var(--sw-shadow-lg);
  --faq-radius-md: var(--sw-radius-md);
  --faq-radius-lg: var(--sw-radius-lg);
  --faq-radius-xl: var(--sw-radius-xl);

  --contact-surface: var(--sw-surface);
  --contact-surface-soft: var(--sw-brand-50);
  --contact-border: var(--sw-line);
  --contact-text: var(--sw-ink);
  --contact-muted: var(--sw-muted);
  --contact-shadow: var(--sw-shadow-lg);
  --contact-shadow-soft: var(--sw-shadow-sm);
  --contact-radius-md: var(--sw-radius-md);
  --contact-radius-lg: var(--sw-radius-lg);
  --contact-radius-xl: var(--sw-radius-xl);
}

/* The wrappers also paint a full-height tinted gradient of their own, built
   from --theme-primary at 9%. With the red in place that reads as a pink
   wash over the whole page; the hero keeps its wash, the page does not. */
html body.nedate-ui-standard :is(.welcome-modern-page, .pricing-modern-page, .faq-modern-page,
  .contact-modern-page, .tracking-login-page, .pricing-login-page, .faq-login-page,
  .tracking-page-shell, .shipping-page-wrapper, .register-page, .contact-refresh-page) {
  background: var(--sw-canvas) !important;
}


/* =========================================================================
   02 · BASE & TYPOGRAPHY
   ========================================================================= */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sw-nav-height) + 1rem);
}

html body.nedate-ui-standard,
html body.nedate-public-standard,
html body.nedate-marketing-standard {
  font-family: var(--sw-font-body);
  font-size: var(--sw-text-body);
  font-weight: var(--sw-weight-normal);
  line-height: 1.6;
  color: var(--sw-body);
  background: var(--sw-canvas);
  letter-spacing: 0;
  word-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Never let the browser fake a weight we do not ship. Archivo is self-hosted
     at 500/600/700 and IBM Plex Sans at 400/500/600, so any rule asking for
     800/900 — and several still do, scattered across four stylesheets — used
     to be rendered by smearing the 700 outlines. With synthesis off, font
     matching quietly falls back to the nearest real face instead. Style and
     small-caps synthesis stay on: there is no italic face to fall back to. */
  font-synthesis: style small-caps;
  font-synthesis-weight: none;
}

/* --- Headings -----------------------------------------------------------
   Every heading route in the codebase funnels through here so the display
   face, the weight cap and the tracking stay consistent. The old rules asked
   for 800/900 and negative tracking as tight as -.05em, which is what made
   "Spedisci di più," collapse into one word. */
html body.nedate-ui-standard :is(h1, h2, h3, h4, h5, h6),
html body.nedate-ui-standard :is(.h1, .h2, .h3, .h4, .h5, .h6),
html body.nedate-ui-standard :is(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6),
html body.nedate-ui-standard :is(.faq-modern-title, .pricing-modern-title, .login-page__title),
html body.nedate-ui-standard :is(.faq-modern-panel-card h2, .pricing-modern-faq-title) {
  font-family: var(--sw-font-display) !important;
  font-weight: var(--sw-weight-bold) !important;
  color: var(--sw-ink);
  line-height: 1.16;
  letter-spacing: -.018em !important;
  word-spacing: .02em;
  text-wrap: balance;
  margin-top: 0;
}

/* --- Cascade reconciliation: the faux-bold ------------------------------
   nedate-unified.css forces `font-weight: 900` and `color: #0b1937` on h1/h2
   and on every title class, at `body.nedate-ui-standard[class][class]` —
   specificity (0,4,2), which is what beat the previous two restyling passes.
   Archivo ships 500/600/700 here, so 900 was always synthesised: the browser
   smears the 700 outlines, which is the blur on the old headings. Matched at
   the same specificity, resolved by load order. */
html body.nedate-ui-standard[class][class] :is(h1, h2, .h1, .h2),
html body.nedate-ui-standard[class][class] :is(.login-page__title, .contact-login-title,
  .faq-modern-title, .pricing-modern-title, .tracking-login-title, .shipping-hero-title) {
  font-family: var(--sw-font-display) !important;
  font-weight: var(--sw-weight-bold) !important;
  color: var(--sw-ink) !important;
  letter-spacing: -.018em !important;
}
html[data-theme="dark"] body.nedate-ui-standard[class][class] :is(h1, h2, .h1, .h2),
html[data-bs-theme="dark"] body.nedate-ui-standard[class][class] :is(h1, h2, .h1, .h2),
body.dark-mode.nedate-ui-standard[class][class] :is(h1, h2, .h1, .h2) {
  color: var(--sw-ink) !important;
}
/* The logged-out pricing/FAQ/legal variants and a couple of app screens carry
   their own 800–950 heading rules. Capped explicitly so the intent is on the
   record, not just handled by the synthesis switch above. */
html body.nedate-ui-standard[class][class] :is(.pricing-login-page, .faq-login-page,
  .legal-login-page, .marketplaces-login-page, .wallet-page)
  :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5) {
  font-family: var(--sw-font-display) !important;
  font-weight: var(--sw-weight-bold) !important;
}

/* Headings sitting on a dark band keep the inverted ink (section 03). */
html body.nedate-ui-standard[class][class] :is(.welcome-modern-how-section, .welcome-modern-cta,
  .landing-cta-banner, .pricing-modern-cta-section, .nedate-site-footer, .sw-on-dark)
  :is(h1, h2, .h1, .h2) {
  color: var(--sw-on-dark) !important;
}

html body.nedate-ui-standard h1,
html body.nedate-ui-standard .h1 { font-size: var(--sw-text-h1); }
html body.nedate-ui-standard h2,
html body.nedate-ui-standard .h2 { font-size: var(--sw-text-h2); line-height: 1.2; }
html body.nedate-ui-standard h3,
html body.nedate-ui-standard .h3 { font-size: var(--sw-text-h3); line-height: 1.26; letter-spacing: -.012em !important; }
html body.nedate-ui-standard h4,
html body.nedate-ui-standard .h4 { font-size: var(--sw-text-h4); line-height: 1.34; letter-spacing: -.008em !important; }
html body.nedate-ui-standard h5,
html body.nedate-ui-standard .h5 { font-size: 1rem; line-height: 1.4; letter-spacing: -.004em !important; }
html body.nedate-ui-standard h6,
html body.nedate-ui-standard .h6 { font-size: .9375rem; line-height: 1.4; letter-spacing: 0 !important; }

html body.nedate-ui-standard :is(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
  font-size: var(--sw-text-h2);
  line-height: 1.15;
}

/* Prose */
html body.nedate-ui-standard p { margin-bottom: 1rem; }
html body.nedate-ui-standard p:last-child { margin-bottom: 0; }

/* `.faq-modern-body` sta qui dentro perche' su /tariffe e' un paragrafo di
   sommario — ma su /faq la stessa classe e' addosso a un <section>, e questa
   regola gli metteva addosso `max-width: 62ch`: l'intera sezione delle
   domande finiva schiacciata in 620px su una pagina larga 1280, con le
   domande spezzate su cinque righe. Vincolata all'elemento giusto. */
html body.nedate-ui-standard :is(.lead, .pricing-modern-subtitle, .login-page__lead, p.faq-modern-body) {
  font-family: var(--sw-font-body);
  font-size: var(--sw-text-lead);
  font-weight: var(--sw-weight-normal) !important;
  line-height: 1.62;
  color: var(--sw-muted) !important;
  letter-spacing: 0 !important;
  max-width: 62ch;
  text-wrap: pretty;
}

html body.nedate-ui-standard .text-muted,
html body.nedate-ui-standard .text-secondary { color: var(--sw-muted) !important; }

/* Numerals: tabular everywhere they are compared or stacked */
html body.nedate-ui-standard :is(table, .pricing-modern-price-val, .welcome-modern-plan-price,
  .nedate-stat-value, .stat-value, td, th, .badge) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Links */
html body.nedate-ui-standard a {
  color: var(--sw-brand-700);
  text-decoration-color: color-mix(in srgb, var(--sw-brand-600) 32%, transparent);
  text-underline-offset: .18em;
  transition: color var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard a:hover { color: var(--sw-brand-800); }
html body.nedate-ui-standard a.text-decoration-none:hover { text-decoration: none; }

/* Focus — one visible, consistent ring; never remove it */
html body.nedate-ui-standard :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sw-brand-600);
  outline-offset: 2px;
  border-radius: var(--sw-radius-xs);
}
html body.nedate-ui-standard :is(a, button, input, select, textarea):focus:not(:focus-visible) {
  outline: none;
}

::selection { background: var(--sw-brand-200); color: var(--sw-navy-900); }

html body.nedate-ui-standard hr {
  border: 0;
  border-top: 1px solid var(--sw-line);
  opacity: 1;
  margin: var(--sw-space-5) 0;
}

html body.nedate-ui-standard :is(code, kbd, samp, .font-monospace) {
  font-family: var(--sw-font-mono);
  font-size: .92em;
}

html body.nedate-ui-standard img { max-width: 100%; height: auto; }

/* Scrollbars */
html body.nedate-ui-standard * { scrollbar-width: thin; scrollbar-color: var(--sw-line-strong) transparent; }
html body.nedate-ui-standard ::-webkit-scrollbar { width: 10px; height: 10px; }
html body.nedate-ui-standard ::-webkit-scrollbar-track { background: transparent; }
html body.nedate-ui-standard ::-webkit-scrollbar-thumb {
  background: var(--sw-line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--sw-radius-pill);
}
html body.nedate-ui-standard ::-webkit-scrollbar-thumb:hover { background: var(--sw-muted); background-clip: content-box; }

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 2000;
  padding: .75rem 1.25rem;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600);
  border-radius: 0 0 var(--sw-radius-sm) 0;
  font-weight: var(--sw-weight-semi);
  text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; }


/* =========================================================================
   03 · LAYOUT & CONTAINER
   ========================================================================= */

html body.nedate-ui-standard :is(.container, .container-xl, .container-lg) {
  width: 100%;
  max-width: calc(var(--sw-container) + (var(--sw-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--sw-gutter);
}

/* .container-fluid means "fill the width" — capping it everywhere would
   squeeze the authenticated dashboards and their wide tables, so the cap is
   scoped to the marketing pages, where an unbounded line length is the
   readability problem instead. The navbar keeps its own wider cap below. */
html body.nedate-public-standard .container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sw-gutter);
}

/* --- Public container geometry ------------------------------------------
   theme-arancio.css pins the public containers to `width: min(100% - 88px,
   1660px)` with !important. On a desktop that reads as a 44px gutter; on a
   390px phone it eats 23% of the screen, which is what the retired 5px
   campaign in restyling-fixes.css spent ten blocks trying to undo. One rule
   replaces the lot: a real container, a fluid gutter, no fixed inset. */
html body.nedate-ui-standard.nedate-public-standard :is(.welcome-modern-page, .pricing-modern-page,
  .faq-modern-page, .contact-modern-page, .tracking-login-page, .login-page, .register-page)
  :is(.container, .container-xl, .container-lg, .container-fluid),
html body.nedate-ui-standard.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero,
  .pricing-modern-hero, .tracking-login-hero) > :is(.container, .container-xl) {
  width: 100% !important;
  max-width: calc(var(--sw-container) + (var(--sw-gutter) * 2)) !important;
  margin-inline: auto !important;
  padding-inline: var(--sw-gutter) !important;
}

/* Public page rhythm */
html body.nedate-public-standard section { position: relative; }
html body.nedate-public-standard :is(.py-5, .py-6) { padding-block: var(--sw-section-y) !important; }

/* --- Dark section contrast ---------------------------------------------
   The navy sections used to inherit the light-theme ink, so "Spedire in 3
   semplici step" and "Pronto a spedire più smart?" rendered as near-black on
   near-black. Anything inside a dark surface now flips its ink. */
html body.nedate-ui-standard :is(
  .welcome-modern-how-section,
  .welcome-modern-cta,
  .landing-cta-banner,
  .pricing-modern-cta-section,
  .nedate-site-footer,
  .sw-on-dark
) {
  color: var(--sw-on-dark-body);
}

html body.nedate-ui-standard :is(
  .welcome-modern-how-section,
  .welcome-modern-cta,
  .landing-cta-banner,
  .pricing-modern-cta-section,
  .nedate-site-footer,
  .sw-on-dark
) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .display-5, .display-6, strong, b, dt) {
  color: var(--sw-on-dark) !important;
}

html body.nedate-ui-standard :is(
  .welcome-modern-how-section,
  .welcome-modern-cta,
  .landing-cta-banner,
  .pricing-modern-cta-section,
  .nedate-site-footer,
  .sw-on-dark
) :is(p, li, span, small, .lead, .text-muted, .pricing-modern-subtitle) {
  color: var(--sw-on-dark-body) !important;
}

html body.nedate-ui-standard :is(
  .welcome-modern-how-section,
  .welcome-modern-cta,
  .landing-cta-banner,
  .pricing-modern-cta-section,
  .sw-on-dark
) :is(.text-muted, small, .small) {
  color: var(--sw-on-dark-muted) !important;
}

/* …but light cards nested inside a dark section keep their own ink. */
html body.nedate-ui-standard :is(.welcome-modern-how-section, .landing-cta-banner, .pricing-modern-cta-section)
  :is(.card, .tool-card, .welcome-modern-tracking-preview, .nedate-section-card, .sw-card) {
  color: var(--sw-body);
}
html body.nedate-ui-standard :is(.welcome-modern-how-section, .landing-cta-banner, .pricing-modern-cta-section)
  :is(.card, .tool-card, .welcome-modern-tracking-preview, .nedate-section-card, .sw-card)
  :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--sw-ink) !important;
}
html body.nedate-ui-standard :is(.welcome-modern-how-section, .landing-cta-banner, .pricing-modern-cta-section)
  :is(.card, .tool-card, .welcome-modern-tracking-preview, .nedate-section-card, .sw-card)
  :is(p, span, small, li) {
  color: var(--sw-body) !important;
}


/* =========================================================================
   04 · NAVIGATION
   ========================================================================= */

html body.nedate-ui-standard .navbar.navbar-azure.fixed-top,
html body.nedate-public-standard nav.navbar.fixed-top.navbar-azure {
  height: var(--sw-nav-height) !important;
  min-height: var(--sw-nav-height) !important;
  max-height: var(--sw-nav-height) !important;
  padding-block: 0 !important;
  color: var(--sw-on-dark);
  background: var(--sw-navy-950) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: box-shadow var(--sw-dur) var(--sw-ease), background var(--sw-dur) var(--sw-ease);
}

/* Lifts once the page scrolls — set by the shell script, harmless if absent */
html body.nedate-ui-standard .navbar.navbar-azure.fixed-top.is-scrolled {
  box-shadow: 0 6px 28px rgba(7, 14, 28, .34) !important;
}

/* theme-arancio.css pins this to `width: min(100% - 88px, 1660px)` and
   `height: 88px`, both !important — the source of the 88px-tall bar and its
   44px side inset. Overridden in full so the bar matches --sw-nav-height. */
html body.nedate-ui-standard .navbar-azure > .container-fluid {
  width: 100% !important;
  height: var(--sw-nav-height) !important;
  min-height: var(--sw-nav-height) !important;
  margin-inline: auto !important;
  padding-inline: var(--sw-gutter) !important;
  gap: var(--sw-space-4);
}

/* Brand */
html body.nedate-ui-standard .navbar-azure .navbar-brand {
  display: inline-flex;
  align-items: center;
  padding-block: 0;
  margin-right: var(--sw-space-2);
}
html body.nedate-ui-standard .navbar-azure .navbar-brand img {
  width: auto;
  max-width: 160px !important;
  max-height: 32px !important;
  image-rendering: -webkit-optimize-contrast;
  transition: opacity var(--sw-dur) var(--sw-ease);
}
html body.nedate-ui-standard .navbar-azure .navbar-brand:hover img { opacity: .82; }

/* Primary links */
html body.nedate-ui-standard .navbar-azure .nav-link-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .5rem .8rem !important;
  color: rgba(244, 248, 253, .70) !important;
  border: 0 !important;
  border-radius: var(--sw-radius-xs) !important;
  background: transparent !important;
  font-family: var(--sw-font-body);
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-medium);
  letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow: none !important;
  transition: color var(--sw-dur-fast) var(--sw-ease), background var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .navbar-azure .nav-link-glass:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
}
html body.nedate-ui-standard .navbar-azure .nav-link-glass.is-active {
  color: #fff !important;
  font-weight: var(--sw-weight-semi);
  background: transparent !important;
}
/* One brand underline marks the current page — replaces the cyan pill */
html body.nedate-ui-standard .navbar-azure .nav-link-glass.is-active::after,
html body.nedate-ui-standard.nedate-public-standard .navbar.navbar-azure .nav-link-glass.is-active::after {
  position: absolute;
  right: .8rem;
  bottom: 2px;
  left: .8rem;
  height: 2px;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-brand-500) !important;
  content: "";
}

/* Icon buttons (theme toggle, bell, user, hamburger) */
html body.nedate-ui-standard .navbar-azure :is(.btn-icon-glass, .btn-user-glass, .navbar-toggler) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0 !important;
  color: rgba(244, 248, 253, .88) !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: var(--sw-radius-sm) !important;
  box-shadow: none !important;
  transition: background var(--sw-dur-fast) var(--sw-ease), color var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .navbar-azure :is(.btn-icon-glass, .btn-user-glass, .navbar-toggler):hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .13) !important;
}
html body.nedate-ui-standard .navbar-azure .navbar-toggler:focus { box-shadow: none !important; }

/* Auth buttons — one ghost, one solid brand. */
html body.nedate-ui-standard .navbar-azure .btn-auth-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 40px;
  padding: .5rem 1rem !important;
  color: rgba(244, 248, 253, .92) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: var(--sw-radius-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-semi);
  white-space: nowrap;
  transition: background var(--sw-dur-fast) var(--sw-ease), border-color var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .navbar-azure .btn-auth-glass:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .26) !important;
  transform: none;
}
html body.nedate-ui-standard .navbar-azure .btn-auth-glass:last-child {
  color: var(--sw-on-brand) !important;
  border-color: transparent !important;
  background: var(--sw-brand-600) !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard .navbar-azure .btn-auth-glass:last-child:hover {
  background: var(--sw-brand-700) !important;
  border-color: transparent !important;
}

/* Notification dot */
html body.nedate-ui-standard .navbar-azure .notif-dot {
  background: var(--sw-brand-500) !important;
  box-shadow: 0 0 0 2px var(--sw-navy-950);
}

/* Dropdowns */
html body.nedate-ui-standard :is(.glass-dropdown, .dropdown-menu) {
  padding: .375rem;
  color: var(--sw-body);
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-md) !important;
  box-shadow: var(--sw-shadow-lg) !important;
  backdrop-filter: none;
}
html body.nedate-ui-standard .dropdown-item {
  padding: .55rem .75rem;
  color: var(--sw-body) !important;
  border-radius: var(--sw-radius-xs) !important;
  font-size: var(--sw-text-sm);
  transition: background var(--sw-dur-fast) var(--sw-ease), color var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .dropdown-item:hover,
html body.nedate-ui-standard .dropdown-item:focus {
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
}
html body.nedate-ui-standard .dropdown-divider { border-color: var(--sw-line); }

/* Offset for the fixed navbar */
html body.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero, .pricing-modern-hero,
  .tracking-login-hero, .login-page, .nedate-public-page > section:first-of-type) {
  padding-top: calc(var(--sw-nav-height) + clamp(2rem, 1rem + 3vw, 4rem));
}


/* =========================================================================
   05 · BUTTONS
   ========================================================================= */

html body.nedate-ui-standard :is(.btn, button, .btn-action, .welcome-modern-plan-button,
  .pricing-modern-plan-btn, .faq-modern-primary-btn, .pricing-modern-cta-btn, .landing-cta-btn) {
  font-family: var(--sw-font-body);
  font-weight: var(--sw-weight-semi);
  letter-spacing: -.005em;
  text-transform: none !important;   /* kills the shouty uppercase CTAs */
  transition: background var(--sw-dur-fast) var(--sw-ease),
              border-color var(--sw-dur-fast) var(--sw-ease),
              color var(--sw-dur-fast) var(--sw-ease),
              box-shadow var(--sw-dur-fast) var(--sw-ease),
              transform var(--sw-dur-fast) var(--sw-ease);
}

html body.nedate-ui-standard .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .625rem 1.25rem;
  border-radius: var(--sw-radius-sm) !important;
  border: 1px solid transparent;
  font-size: var(--sw-text-sm);
  line-height: 1.3;
  box-shadow: none;
}
html body.nedate-ui-standard .btn:active { transform: translateY(1px); }
html body.nedate-ui-standard .btn:disabled,
html body.nedate-ui-standard .btn.disabled { opacity: .55; cursor: not-allowed; transform: none; }

html body.nedate-ui-standard :is(.btn-primary, .btn-danger) {
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard :is(.btn-primary, .btn-danger):hover {
  background: var(--sw-brand-700) !important;
  border-color: var(--sw-brand-700) !important;
  box-shadow: var(--sw-shadow-brand);
}

html body.nedate-ui-standard .btn-secondary {
  color: var(--sw-on-dark) !important;
  background: var(--sw-navy-700) !important;
  border-color: var(--sw-navy-700) !important;
}
html body.nedate-ui-standard .btn-secondary:hover {
  background: var(--sw-navy-800) !important;
  border-color: var(--sw-navy-800) !important;
}

html body.nedate-ui-standard :is(.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-outline-light) {
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border-color: var(--sw-line-strong) !important;
}
html body.nedate-ui-standard :is(.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-outline-light):hover {
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
  border-color: var(--sw-brand-300) !important;
}

html body.nedate-ui-standard .btn-success { color: #fff !important; background: var(--sw-success) !important; border-color: var(--sw-success) !important; }
html body.nedate-ui-standard .btn-warning { color: #fff !important; background: var(--sw-warning) !important; border-color: var(--sw-warning) !important; }
html body.nedate-ui-standard .btn-link    { color: var(--sw-brand-700) !important; background: none !important; border: 0 !important; box-shadow: none !important; }

html body.nedate-ui-standard .btn-sm { min-height: 36px; padding: .375rem .875rem; font-size: var(--sw-text-xs); }
html body.nedate-ui-standard .btn-lg { min-height: 52px; padding: .875rem 1.75rem; font-size: 1rem; }

/* --- Marketing CTA pair (hero, pricing, CTA banners) ------------------- */
html body.nedate-ui-standard :is(.welcome-modern-action-primary, .faq-modern-primary-btn,
  .pricing-modern-plan-btn--primary, .landing-cta-btn, .contact-modern-submit,
  .tracking-login-submit, .pricing-modern-cta-btn--light) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  padding: .8rem 1.6rem !important;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border: 1px solid var(--sw-brand-600) !important;
  border-radius: var(--sw-radius-sm) !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  font-weight: var(--sw-weight-semi) !important;
  text-transform: none !important;
  letter-spacing: -.005em !important;
  text-decoration: none;
}
html body.nedate-ui-standard :is(.welcome-modern-action-primary, .faq-modern-primary-btn,
  .pricing-modern-plan-btn--primary, .landing-cta-btn, .contact-modern-submit,
  .tracking-login-submit, .pricing-modern-cta-btn--light):hover {
  background: var(--sw-brand-700) !important;
  border-color: var(--sw-brand-700) !important;
  box-shadow: var(--sw-shadow-brand) !important;
  transform: translateY(-1px);
}

html body.nedate-ui-standard :is(.welcome-modern-action-secondary, .pricing-modern-cta-btn--ghost) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  padding: .8rem 1.6rem !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line-strong) !important;
  border-radius: var(--sw-radius-sm) !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  font-weight: var(--sw-weight-semi) !important;
  text-decoration: none;
}
html body.nedate-ui-standard :is(.welcome-modern-action-secondary, .pricing-modern-cta-btn--ghost):hover {
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
  border-color: var(--sw-brand-300) !important;
}

/* On the dark banners the primary action inverts to white on navy: it is the
   highest-contrast pair available there, and it keeps the red reserved for
   actions sitting on light surfaces. */
html body.nedate-ui-standard :is(.landing-cta-banner, .welcome-modern-cta, .pricing-modern-cta-section)
  :is(.landing-cta-btn, .welcome-modern-action-primary, .pricing-modern-cta-btn--light, .btn-light) {
  color: var(--sw-navy-900) !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 8px 22px rgba(7, 14, 28, .3) !important;
}
html body.nedate-ui-standard :is(.landing-cta-banner, .welcome-modern-cta, .pricing-modern-cta-section)
  :is(.landing-cta-btn, .welcome-modern-action-primary, .pricing-modern-cta-btn--light, .btn-light):hover {
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
  border-color: var(--sw-brand-50) !important;
}

/* Ghost buttons that sit on a dark banner */
html body.nedate-ui-standard :is(.landing-cta-banner, .pricing-modern-cta-section, .welcome-modern-cta)
  :is(.welcome-modern-action-secondary, .pricing-modern-cta-btn--ghost) {
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .22) !important;
}
html body.nedate-ui-standard :is(.landing-cta-banner, .pricing-modern-cta-section, .welcome-modern-cta)
  :is(.welcome-modern-action-secondary, .pricing-modern-cta-btn--ghost):hover {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .36) !important;
}


/* =========================================================================
   06 · FORMS
   ========================================================================= */

html body.nedate-ui-standard :is(.form-control, .form-select, input[type="text"], input[type="email"],
  input[type="password"], input[type="search"], input[type="tel"], input[type="number"],
  input[type="url"], input[type="date"], textarea, select) {
  min-height: 48px;
  padding: .7rem .875rem;
  color: var(--sw-ink);
  background-color: var(--sw-surface);
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-radius-sm) !important;
  font-family: var(--sw-font-body);
  font-size: 1rem;   /* 16px — stops iOS Safari zooming on focus */
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--sw-dur-fast) var(--sw-ease), box-shadow var(--sw-dur-fast) var(--sw-ease);
}

html body.nedate-ui-standard :is(.form-control, .form-select, textarea, select, input):focus {
  border-color: var(--sw-brand-500) !important;
  box-shadow: var(--sw-focus-ring) !important;
  outline: none;
}

html body.nedate-ui-standard :is(.form-control, textarea)::placeholder { color: var(--sw-faint); opacity: 1; }
html body.nedate-ui-standard textarea.form-control { min-height: 120px; line-height: 1.6; }

html body.nedate-ui-standard .form-select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23617087' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: 16px;
  appearance: none;
}

/* Labels */
html body.nedate-ui-standard :is(.form-label, .log-label) {
  display: block;
  margin-bottom: .375rem;
  color: var(--sw-muted);
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-semi);
  letter-spacing: .01em;
  text-transform: none;
}

/* Floating labels — the platform's main input pattern */
html body.nedate-ui-standard .form-floating > :is(.form-control, .form-select) {
  height: 60px;
  padding: 1.4rem .875rem .45rem;
}
html body.nedate-ui-standard .form-floating > label {
  padding: .7rem .875rem;
  color: var(--sw-muted);
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-medium);
}
html body.nedate-ui-standard .form-floating > .form-control:focus ~ label,
html body.nedate-ui-standard .form-floating > .form-control:not(:placeholder-shown) ~ label,
html body.nedate-ui-standard .form-floating > .form-select ~ label {
  color: var(--sw-muted);
  transform: scale(.8) translateY(-.5rem) translateX(.15rem);
  opacity: 1;
}

/* The home-page quote form's own group/label pattern */
html body.nedate-ui-standard .log-input-group {
  position: relative;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-radius-sm);
  transition: border-color var(--sw-dur-fast) var(--sw-ease), box-shadow var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .log-input-group:focus-within {
  border-color: var(--sw-brand-500);
  box-shadow: var(--sw-focus-ring);
}
html body.nedate-ui-standard .log-input-group :is(.form-control, input, select) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Le misure sono quelle che il campo «Nazione mittente» in home si riscriveva
   da solo (`.welcome-modern-page … .log-select-btn`, 26/16/8/16) e che gli altri
   campi del modulo di registrazione hanno gia': portate qui, cosi' il bottone e'
   uguale ovunque invece di dipendere dalla pagina che lo ospita.
   `.form-control` arriva con le sue: senza `!important` vincerebbe lei sui
   bottoni che portano tutte e due le classi. */
html body.nedate-ui-standard .log-select-btn,
html body.nedate-ui-standard button.log-select-btn.form-control {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  min-height: 58px !important;
  padding: 26px 16px 8px !important;
  border-radius: var(--sw-control-r, 5px) !important;
  cursor: pointer;
}
html body.nedate-ui-standard .log-input-group .log-label,
html body.nedate-ui-standard .log-select-btn .log-label {
  position: absolute;
  /* allineata al rientro del campo: 9px dal bordo di sopra, 16 da sinistra */
  top: 9px;
  left: 16px;
  margin: 0;
  color: var(--sw-muted);
  font-size: .6875rem;
  font-weight: var(--sw-weight-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Unit suffix (kg / cm) */
html body.nedate-ui-standard :is(.input-group-text, .log-unit) {
  color: var(--sw-muted);
  background: var(--sw-surface-2);
  border-color: var(--sw-line-strong);
  border-radius: var(--sw-radius-sm);
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-medium);
}

/* Segmented choice (parcel / envelope / pallet, monthly / yearly) */
html body.nedate-ui-standard :is(.type-selector, .pricing-modern-billing, .welcome-modern-dashboard-tabs) {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--sw-surface-2);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-md);
}
html body.nedate-ui-standard :is(.type-btn, .pricing-modern-billing-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 40px;
  padding: .5rem 1.1rem !important;
  margin: 0 !important;
  color: var(--sw-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--sw-radius-xs) !important;
  box-shadow: none !important;
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-semi);
  cursor: pointer;
  transition: color var(--sw-dur-fast) var(--sw-ease), background var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard :is(.type-btn:hover, .pricing-modern-billing-btn:hover) { color: var(--sw-ink) !important; }
html body.nedate-ui-standard :is(
  input:checked + .type-btn,
  .type-btn.active,
  .pricing-modern-billing-btn.active,
  .pricing-modern-billing-btn[aria-pressed="true"]
) {
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  box-shadow: var(--sw-shadow-xs) !important;
}

/* Checkbox / radio */
html body.nedate-ui-standard .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .18rem;
  border: 1.5px solid var(--sw-line-strong);
  background-color: var(--sw-surface);
  cursor: pointer;
}
html body.nedate-ui-standard .form-check-input:checked {
  background-color: var(--sw-brand-600);
  border-color: var(--sw-brand-600);
}
html body.nedate-ui-standard .form-check-input:focus { box-shadow: var(--sw-focus-ring); border-color: var(--sw-brand-500); }
html body.nedate-ui-standard .form-check-label { color: var(--sw-body); font-size: var(--sw-text-sm); cursor: pointer; }

/* Validation */
html body.nedate-ui-standard :is(.form-control, .form-select).is-invalid {
  border-color: var(--sw-danger) !important;
  background-image: none !important;
  padding-right: .875rem;
}
html body.nedate-ui-standard :is(.form-control, .form-select).is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-danger) 22%, transparent) !important;
}
html body.nedate-ui-standard .invalid-feedback {
  display: block;
  margin-top: .3rem;
  color: var(--sw-danger);
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-medium);
}
html body.nedate-ui-standard .text-danger { color: var(--sw-danger) !important; }

/* Required marker: a quiet dot, not a shouting asterisk */
html body.nedate-ui-standard :is(.form-label, .log-label) .text-danger { font-weight: var(--sw-weight-bold); }


/* =========================================================================
   07 · SURFACES — cards, badges, kickers, alerts
   ========================================================================= */

html body.nedate-ui-standard :is(.card, .nedate-section-card, .tool-card, .feature-card,
  .faq-modern-panel-card, .pricing-modern-card, .faq-modern-stat-card, .sw-card,
  .welcome-modern-tracking-preview, .faq-modern-action-card, .pricing-modern-strip-item) {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-lg) !important;
  box-shadow: var(--sw-shadow-sm);
}

/* Same story as the headings: nedate-unified.css pins every card to an 8px
   radius at (0,4,2). Matched here so the card family keeps one radius. */
html body.nedate-ui-standard[class][class] :is(.nedate-section-card, .feature-card,
  .landing-feature-card, .faq-modern-action-card, .forgot-page__support-card, .login-page__card,
  .shipping-card, .pricing-login-card, .legal-login-summary, .tracking-login-card,
  .pricing-modern-card, .tool-card, .welcome-modern-tracking-preview, .white-card,
  .wallet-section-card, .user-api-card) {
  border-radius: var(--sw-radius-lg) !important;
}
html body.nedate-ui-standard[class][class] :is(.tool-card, .welcome-modern-hero-tool-card,
  .tracking-login-card, .login-page__card, .contact-modern-form-card, .pricing-modern-card) {
  border-radius: var(--sw-radius-xl) !important;
}

html body.nedate-ui-standard .card-body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
html body.nedate-ui-standard .card-header {
  padding: 1rem 1.25rem;
  background: transparent;
  border-bottom: 1px solid var(--sw-line);
  font-weight: var(--sw-weight-semi);
  color: var(--sw-ink);
}

/* Interactive cards lift once, gently */
html body.nedate-ui-standard :is(.feature-card, .landing-feature-card, .faq-modern-action-card,
  .pricing-modern-strip-item, .welcome-modern-plan-card) {
  transition: border-color var(--sw-dur) var(--sw-ease),
              box-shadow var(--sw-dur) var(--sw-ease),
              transform var(--sw-dur) var(--sw-ease);
}
html body.nedate-ui-standard :is(.feature-card, .landing-feature-card, .faq-modern-action-card,
  .pricing-modern-strip-item):hover {
  border-color: var(--sw-line-strong);
  box-shadow: var(--sw-shadow-md);
  transform: translateY(-2px);
}

/* --- Icon chips ---------------------------------------------------------
   Previously every card drew a different pastel: blue, green, pink, teal,
   orange. One tinted treatment reads as a system instead of a swatch book. */
html body.nedate-ui-standard :is(.feature-icon, .faq-modern-panel-icon, .pricing-modern-strip-icon,
  .faq-modern-question-icon, .welcome-modern-cta-icon, .tracking-login-card-icon,
  .pricing-login-card-icon, .faq-login-card-icon, .login-page__feat-icon) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--sw-brand-600) !important;
  background: var(--sw-brand-50) !important;
  border: 1px solid var(--sw-brand-100) !important;
  border-radius: var(--sw-radius-md) !important;
  box-shadow: none !important;
  font-size: 1.15rem;
}
html body.nedate-ui-standard :is(.feature-icon, .faq-modern-panel-icon) :is(i, svg) { color: inherit !important; }

/* nedate-page-system.css paints these icons blue/green/orange/purple/red with
   !important at a higher specificity than the rule above, which is what gave
   the feature grid one colour per card. Matched here selector-for-selector so
   the whole grid reads as a single system. */
html body.nedate-public-standard .welcome-modern-page .feature-card .feature-icon,
html body.nedate-public-standard .welcome-modern-page .feature-card .feature-icon i,
html body.nedate-public-standard .welcome-modern-page .feature-card
  .feature-icon:is(.is-green, .is-orange, .is-blue, .is-purple, .is-red, .is-teal, .is-pink),
html body.nedate-public-standard .welcome-modern-page .feature-card
  .feature-icon:is(.is-green, .is-orange, .is-blue, .is-purple, .is-red, .is-teal, .is-pink) i {
  color: var(--sw-brand-600) !important;
  background: var(--sw-brand-50) !important;
  border: 1px solid var(--sw-brand-100) !important;
  border-radius: var(--sw-radius-md) !important;
}
html body.nedate-public-standard .welcome-modern-page .feature-card .feature-icon i {
  background: none !important;
  border: 0 !important;
}

/* Icon chips on dark surfaces */
html body.nedate-ui-standard :is(.welcome-modern-how-section, .landing-cta-banner, .welcome-modern-cta,
  .pricing-modern-cta-section) :is(.feature-icon, .welcome-modern-cta-icon) {
  color: var(--sw-brand-300) !important;
  background: rgba(240, 70, 81, .14) !important;
  border-color: rgba(240, 70, 81, .26) !important;
}

/* --- Kickers / eyebrows -------------------------------------------------
   nedate-unified.css paints every eyebrow on the platform teal-green
   (#dff7eb / #0f766e) at font-weight 900, using `body.nedate-ui-standard
   [class][class]` to inflate its specificity to (0,4,2). That teal is the
   last survivor of a palette nobody uses any more, and the 900 is another
   faux-bold. Matched at the same specificity — this file loads last, so the
   tie resolves here — rather than escalating the arms race further. */
html body.nedate-ui-standard[class][class] :is(.welcome-modern-section-kicker, .faq-modern-eyebrow,
  .contact-modern-eyebrow, .contact-modern-kicker, .faq-modern-panel-kicker,
  .pricing-modern-eyebrow, .tracking-eyebrow, .shipping-hero-eyebrow, .nedate-page-eyebrow,
  .eyebrow, .legal-page__eyebrow, .legal-login-hero__eyebrow, .legal-login-summary__kicker,
  .pricing-modern-plan-code, .login-page__eyebrow, .pricing-login-card-kicker) {
  width: max-content !important;
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem !important;
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
  border: 1px solid var(--sw-brand-100) !important;
  border-radius: var(--sw-radius-pill) !important;
  font-family: var(--sw-font-body) !important;
  font-size: .6875rem !important;
  font-weight: var(--sw-weight-semi) !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
  line-height: 1.4;
}
html body.nedate-ui-standard :is(.welcome-modern-section-kicker, .faq-modern-eyebrow) i { font-size: .8em; }

/* Kicker on dark — must also clear the (0,4,2) rule above */
html body.nedate-ui-standard[class][class] :is(.welcome-modern-how-section, .landing-cta-banner,
  .welcome-modern-cta, .pricing-modern-cta-section, .nedate-site-footer)
  :is(.welcome-modern-section-kicker, .faq-modern-eyebrow, .contact-modern-kicker, .eyebrow) {
  color: var(--sw-brand-200) !important;
  background: rgba(240, 70, 81, .16) !important;
  border-color: rgba(240, 70, 81, .28) !important;
}

/* --- Badges ------------------------------------------------------------- */
html body.nedate-ui-standard .badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem;
  border-radius: var(--sw-radius-pill);
  font-family: var(--sw-font-body);
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-semi);
  letter-spacing: 0;
  line-height: 1.35;
}
html body.nedate-ui-standard :is(.badge.bg-primary, .badge.bg-danger, .pricing-modern-popular-badge) {
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard :is(.badge.bg-success, .pricing-modern-save-badge) { color: #fff !important; background: var(--sw-success-fill) !important; }
html body.nedate-ui-standard .badge.bg-warning { color: var(--sw-on-warning) !important; background: var(--sw-warning) !important; }
html body.nedate-ui-standard .badge.bg-info    { color: var(--sw-on-info) !important;    background: var(--sw-info) !important; }
html body.nedate-ui-standard :is(.badge.bg-secondary, .badge.bg-light) {
  color: var(--sw-body) !important;
  background: var(--sw-surface-2) !important;
  border: 1px solid var(--sw-line);
}

/* --- Alerts ------------------------------------------------------------- */
html body.nedate-ui-standard .alert {
  padding: .875rem 1.125rem;
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: var(--sw-radius-sm);
  font-size: var(--sw-text-sm);
}
html body.nedate-ui-standard :is(.alert-success)                        { color: #0b5c40; background: var(--sw-success-bg); border-color: var(--sw-success); }
html body.nedate-ui-standard :is(.alert-danger, .alert-error)           { color: #8f1424; background: var(--sw-danger-bg);  border-color: var(--sw-danger); }
html body.nedate-ui-standard :is(.alert-warning)                        { color: #7c3d06; background: var(--sw-warning-bg); border-color: var(--sw-warning); }
html body.nedate-ui-standard :is(.alert-info, .alert-primary)           { color: #14508f; background: var(--sw-info-bg);    border-color: var(--sw-info); }


/* =========================================================================
   08 · HERO SYSTEM (shared by home, pricing, FAQ, tracking, contact)
   ========================================================================= */

html body.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero, .pricing-modern-hero,
  .tracking-login-hero) {
  position: relative;
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background: linear-gradient(180deg, var(--sw-surface) 0%, var(--sw-canvas) 100%);
  overflow: hidden;
}

/* Soft brand wash behind the hero, replacing the cyan/orange radials */
html body.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero, .pricing-modern-hero,
  .tracking-login-hero)::before {
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  background:
    radial-gradient(680px 300px at 12% -8%, rgba(240, 70, 81, .07), transparent 70%),
    radial-gradient(560px 280px at 88% 4%, rgba(30, 58, 90, .06), transparent 70%);
  pointer-events: none;
  content: "";
}

html body.nedate-public-standard :is(.pricing-modern-hero__grid, .faq-modern-hero .row) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}

html body.nedate-public-standard :is(.welcome-modern-hero__content, .pricing-modern-hero__content) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sw-space-4);
  min-width: 0;
}

/* Hero headline */
html body.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero, .pricing-modern-hero,
  .tracking-login-hero) :is(h1, .faq-modern-title, .login-page__title) {
  margin: 0;
  font-size: var(--sw-text-display) !important;
  font-weight: var(--sw-weight-bold) !important;
  line-height: 1.08 !important;
  letter-spacing: -.022em !important;
  word-spacing: .04em !important;
  color: var(--sw-ink) !important;
  max-width: 16ch;
}

/* Second line of the split headline — brand red, not a gradient */
html body.nedate-public-standard :is(.welcome-modern-title-accent, .pricing-modern-title-accent,
  .contact-modern-title-line) {
  display: block;
  color: var(--sw-brand-600) !important;
  background: none !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

html body.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero, .pricing-modern-hero,
  .tracking-login-hero) :is(.pricing-modern-subtitle, .login-page__lead, .lead) {
  margin: 0;
  max-width: 52ch;
  color: var(--sw-muted) !important;
}

/* Hero action pair */
html body.nedate-public-standard :is(.faq-modern-actions, .welcome-modern-hero-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
}

/* Trust row under the CTAs */
html body.nedate-public-standard :is(.welcome-modern-trust-row, .login-page__trust-strip,
  .tracking-login-trust) {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: .25rem;
  padding: 0;
  background: none;
  border: 0;
}
html body.nedate-public-standard :is(.welcome-modern-trust-row, .login-page__trust-strip) > span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-medium);
}
html body.nedate-public-standard :is(.welcome-modern-trust-row, .login-page__trust-strip) > span i {
  color: var(--sw-success);
  font-size: .95rem;
}

/* --- The three mini action cards repeated on every public hero --------- */
html body.nedate-public-standard .faq-modern-actions .faq-modern-action-card:not(.welcome-modern-action-primary):not(.welcome-modern-action-secondary),
html body.nedate-public-standard .pricing-modern-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
}
html body.nedate-public-standard .pricing-modern-strip-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem;
  min-width: 0;
}
html body.nedate-public-standard .pricing-modern-strip-item strong {
  display: block;
  color: var(--sw-ink);
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-semi);
}
html body.nedate-public-standard .pricing-modern-strip-item span,
html body.nedate-public-standard .pricing-modern-strip-item p {
  color: var(--sw-muted);
  font-size: var(--sw-text-xs);
  line-height: 1.5;
}

/* --- Hero side panel (quote/track/search card) ------------------------- */
html body.nedate-public-standard :is(.welcome-modern-hero__tool, .pricing-modern-hero__panel,
  .faq-modern-panel-card--main, .tracking-login-card) {
  min-width: 0;
}

html body.nedate-ui-standard :is(.tool-card, .landing-tool-card, .welcome-modern-hero-tool-card) {
  overflow: hidden;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-xl) !important;
  box-shadow: var(--sw-shadow-lg) !important;
  /* the old card had a fixed height and scrolled internally */
  max-height: none !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card > div:last-child { overflow: visible !important; }

/* The quote form's submit is a .btn-action, styled by blade-views.css off a
   --log-primary that no longer matches the system. Flattened to the standard
   primary button so the hero's main action looks like every other one. */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-hero-tool-card .btn-action,
html body.nedate-ui-standard.nedate-public-standard #qq-estimate-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 52px;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  background-image: none !important;
  border: 1px solid var(--sw-brand-600) !important;
  border-radius: var(--sw-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--sw-font-body) !important;
  font-size: var(--sw-control-fs) !important;
  font-weight: var(--sw-weight-semi) !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-hero-tool-card .btn-action:hover,
html body.nedate-ui-standard.nedate-public-standard #qq-estimate-btn:hover {
  background: var(--sw-brand-700) !important;
  border-color: var(--sw-brand-700) !important;
  box-shadow: var(--sw-shadow-brand) !important;
}

/* Tabs on the tool card */
html body.nedate-ui-standard .tool-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--sw-surface-2);
  border-bottom: 1px solid var(--sw-line);
}
html body.nedate-ui-standard .tool-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 54px;
  padding: .875rem 1rem;
  color: var(--sw-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-semi);
  cursor: pointer;
  transition: color var(--sw-dur-fast) var(--sw-ease), background var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .tool-tab:hover { color: var(--sw-ink); }
html body.nedate-ui-standard .tool-tab.active {
  color: var(--sw-brand-700);
  background: var(--sw-surface);
  border-bottom-color: var(--sw-brand-600);
}
html body.nedate-ui-standard .tool-tab i { font-size: 1rem; }

/* Shared compact icon + loading-state utilities.
   Used by public forms instead of page-level inline styles. */
html body.nedate-ui-standard .sw-chevron-sm { font-size: .7rem !important; }
html body.nedate-ui-standard .sw-loading-muted { opacity: .35 !important; }
html body.nedate-ui-standard .sw-input-loading {
  padding-right: 2.25rem !important;
}


/* =========================================================================
   09 · HOME PAGE
   ========================================================================= */

/* Parcel illustration — retint from orange/cyan to the brand pair */
html body.nedate-ui-standard .welcome-modern-parcel-box {
  background: linear-gradient(150deg, var(--sw-surface-3), var(--sw-surface-2)) !important;
  border: 1px solid var(--sw-line-strong) !important;
  box-shadow: var(--sw-shadow-md) !important;
}
html body.nedate-ui-standard .welcome-modern-parcel-tape { background: var(--sw-brand-500) !important; opacity: .9; }
html body.nedate-ui-standard .welcome-modern-parcel-bubble { background: var(--sw-navy-700) !important; }
html body.nedate-ui-standard .welcome-modern-parcel-path {
  border-color: var(--sw-brand-300) !important;
  border-top-color: var(--sw-brand-300) !important;
}

/* --- Hero tool card: tabs and submit ------------------------------------
   nedate-page-system.css and nedate-design-system.css both paint the active
   tab with the orange gradient at `body.nedate-public-standard
   .welcome-modern-hero-tool-card .tool-tab.active` (0,3,1). Cleared here at
   (0,4,2), and the tab stops shouting: the active state is a white panel
   with a brand underline, not a saturated fill. */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-hero-tool-card .tool-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  height: auto !important;
  background: var(--sw-surface-2) !important;
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-hero-tool-card .tool-tab {
  min-height: 56px !important;
  height: auto !important;
  padding: .9rem 1rem !important;
  color: var(--sw-muted) !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  font-family: var(--sw-font-body) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-hero-tool-card .tool-tab.active {
  color: var(--sw-brand-700) !important;
  background: var(--sw-surface) !important;
  background-image: none !important;
  border-bottom-color: var(--sw-brand-600) !important;
}

/* --- Hero CTA pair -------------------------------------------------------
   The primary action is also a .faq-modern-action-card, and that class wins
   at (0,3,1) with a translucent white fill — which is why the main call to
   action came out looking like the secondary one. */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-hero-actions
  .faq-modern-action-card.welcome-modern-action-primary {
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  background-image: none !important;
  border: 1px solid var(--sw-brand-600) !important;
  border-radius: var(--sw-radius-sm) !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-hero-actions
  .faq-modern-action-card.welcome-modern-action-primary:hover {
  background: var(--sw-brand-700) !important;
  border-color: var(--sw-brand-700) !important;
  box-shadow: var(--sw-shadow-brand) !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-hero-actions
  .faq-modern-action-card.welcome-modern-action-secondary {
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line-strong) !important;
  border-radius: var(--sw-radius-sm) !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-hero-actions
  .faq-modern-action-card.welcome-modern-action-secondary:hover {
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
  border-color: var(--sw-brand-300) !important;
}

/* --- Courier logo strip --------------------------------------------------
   These are merchant-uploaded PNGs at their own natural sizes — the widest
   is 1177×400 — so the row needs a hard height, not just a max-width, or one
   badly cropped upload blows the section open. Greyscale by default keeps a
   dozen different brand palettes from fighting the page. */
html body.nedate-ui-standard .welcome-modern-strip,
html body.nedate-ui-standard .welcome-modern-logo-strip {
  padding-block: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) !important;
  background: var(--sw-surface);
  border-block: 1px solid var(--sw-line);
}
html body.nedate-ui-standard .wm-marquee-outer {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
html body.nedate-ui-standard .wm-marquee-set {
  align-items: center;
  gap: clamp(1.75rem, 1rem + 2vw, 3rem) !important;
}
html body.nedate-ui-standard.nedate-public-standard .wm-courier-banner {
  height: 34px !important;
  max-height: 34px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: grayscale(1) !important;
  opacity: .55;
  transition: opacity var(--sw-dur) var(--sw-ease), filter var(--sw-dur) var(--sw-ease);
}
html body.nedate-ui-standard.nedate-public-standard .wm-courier-banner:hover {
  filter: grayscale(0) !important;
  opacity: 1;
  transform: none !important;
}
/* A missing courier upload should not leave a broken-image glyph */
html body.nedate-ui-standard .wm-courier-banner:not([src]),
html body.nedate-ui-standard .wm-courier-banner[src=""] { display: none; }

/* Features grid */
html body.nedate-ui-standard .welcome-modern-body-section { background: var(--sw-canvas); }
/* The card markup is three siblings — icon, heading, paragraph — so a plain
   two-column grid drops the paragraph back into column 1 and squeezes it to
   the icon's width, one word per line. Each child is placed explicitly. */
html body.nedate-ui-standard :is(.feature-card, .landing-feature-card) {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-rows: auto auto;
  column-gap: .875rem;
  row-gap: .4rem;
  align-items: start;
  align-content: start;
  height: 100%;
  padding: 1.375rem !important;
}
html body.nedate-ui-standard :is(.feature-card, .landing-feature-card) > .feature-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  font-size: 1.15rem !important;
}
html body.nedate-ui-standard :is(.feature-card, .landing-feature-card) > :is(h3, h4, h5, strong) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center;
  margin: 0 !important;
  min-width: 0;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-body) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-semi) !important;
  letter-spacing: -.008em !important;
  line-height: 1.35 !important;
}
html body.nedate-ui-standard :is(.feature-card, .landing-feature-card) > p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  min-width: 0;
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs) !important;
  line-height: 1.6 !important;
  text-wrap: pretty;
}

/* Section heads */
html body.nedate-ui-standard .landing-features-head,
html body.nedate-ui-standard .welcome-modern-body-section .text-center.mb-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important;
}
html body.nedate-ui-standard .welcome-modern-body-section .text-center .lead { margin-inline: auto; text-align: center; }

/* --- "How it works" — the dark band ------------------------------------ */
html body.nedate-ui-standard .welcome-modern-how-section {
  padding-block: var(--sw-section-y);
  background:
    radial-gradient(760px 420px at 88% 18%, rgba(240, 70, 81, .12), transparent 68%),
    linear-gradient(160deg, var(--sw-navy-950), var(--sw-navy-850) 62%, var(--sw-navy-800)) !important;
}
html body.nedate-ui-standard .welcome-modern-how-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
html body.nedate-ui-standard .welcome-modern-how-copy { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

/* The step numerals come from a CSS counter that nedate-page-system.css
   resets here with `counter-reset: step`. Declaring any other counter on this
   element replaces that declaration, and with no ancestor reset each ::before
   opens its own counter scope — which renders 1, 1, 1 instead of 1, 2, 3.
   The legacy counter name is kept deliberately. */
html body.nedate-ui-standard .welcome-modern-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
  counter-reset: step;
}
html body.nedate-ui-standard .welcome-modern-steps > * { position: relative; min-width: 0; text-align: center; }

/* Step numerals — were bright orange discs */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps div::before {
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  box-shadow: 0 0 0 4px rgba(217, 35, 54, .16);
  font-family: var(--sw-font-body) !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard .welcome-modern-steps > div > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: .6rem;
  color: var(--sw-brand-300) !important;
  background: rgba(240, 70, 81, .12) !important;
  border: 1px solid rgba(240, 70, 81, .24) !important;
  border-radius: var(--sw-radius-md);
  font-size: 1.15rem;
}
html body.nedate-ui-standard .welcome-modern-steps strong,
html body.nedate-ui-standard .welcome-modern-steps h3 {
  display: block;
  margin-bottom: .3rem;
  color: var(--sw-on-dark) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard .welcome-modern-steps span,
html body.nedate-ui-standard .welcome-modern-steps p {
  color: var(--sw-on-dark-muted) !important;
  font-size: var(--sw-text-xs) !important;
  line-height: 1.55;
}

/* Tracking preview card inside the dark band */
html body.nedate-ui-standard .welcome-modern-tracking-preview {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-xl) !important;
  box-shadow: var(--sw-shadow-lg) !important;
}
/* The timeline's <i> elements ARE the dots — 18px circles with the label and
   time positioned around them — so they must not be treated as step blocks.
   Green is the right semantic here (the sample shipment is delivered); it is
   only re-pointed at the system's success token. */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-timeline {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .5rem !important;
  margin: 1.5rem 0 1.25rem !important;
}
/* the rail behind the dots */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-timeline::before {
  left: 12.5% !important;
  right: 12.5% !important;
  top: 6px !important;
  height: 2px !important;
  background: color-mix(in srgb, var(--sw-success) 35%, var(--sw-surface-3)) !important;
}
/* each <i> holds a label and a time; the dot is drawn on its ::before so the
   text can sit under it instead of inside a 18px circle */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-timeline i {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  padding-top: 1.35rem !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-style: normal;
  text-align: center;
  justify-self: stretch !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-timeline i::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-success) 15%, transparent);
  transform: translateX(-50%);
  content: "";
}
/* the last step is the live one */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-timeline i:last-child::before {
  background: var(--sw-brand-600);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-brand-600) 16%, transparent);
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-timeline i b {
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-body) !important;
  font-size: var(--sw-text-xs) !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-timeline i small {
  color: var(--sw-muted) !important;
  font-size: .6875rem !important;
}

/* --- Home pricing showcase ----------------------------------------------
   Markup here is `.pricing-price-line > .currency + .price + .period`, a
   billing-toggle of two buttons, and `.pricing-features` — a different
   vocabulary from the /pricing page, so it needs its own pass. */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-main-card {
  display: flex !important;
  flex-direction: column;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-main-card h3 {
  margin: 0 !important;
  color: var(--sw-muted) !important;
  font-family: var(--sw-font-body) !important;
  font-size: var(--sw-text-xs) !important;
  font-weight: var(--sw-weight-semi) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-price-line {
  display: flex !important;
  align-items: baseline !important;
  gap: .15rem !important;
  margin: .75rem 0 .5rem !important;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-price-line .price {
  font-family: var(--sw-font-display) !important;
  font-size: clamp(2.75rem, 2.2rem + 1.8vw, 3.5rem) !important;
  font-weight: var(--sw-weight-bold) !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
  color: var(--sw-ink) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-price-line .currency {
  align-self: flex-start;
  margin-top: .4rem;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-price-line .period {
  color: var(--sw-muted) !important;
  font-family: var(--sw-font-body) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-medium) !important;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-features {
  margin: 1.25rem 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-features li {
  gap: .55rem !important;
  margin-bottom: .625rem !important;
  color: var(--sw-body) !important;
  font-size: var(--sw-text-sm) !important;
  line-height: 1.5;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-features i {
  margin-top: .15rem !important;
  color: var(--sw-success) !important;
  font-size: 1rem !important;
}
/* Billing toggle — same segmented control as everywhere else */
html body.nedate-ui-standard.nedate-public-standard .billing-toggle {
  display: inline-flex !important;
  gap: .25rem !important;
  padding: .25rem !important;
  background: var(--sw-surface-2) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-md) !important;
}
html body.nedate-ui-standard.nedate-public-standard .billing-btn {
  min-height: 40px;
  padding: .5rem 1.1rem !important;
  color: var(--sw-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--sw-radius-xs) !important;
  box-shadow: none !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard.nedate-public-standard .billing-btn.active {
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  box-shadow: var(--sw-shadow-xs) !important;
}
/* The plan CTA was rendering as a bare underlined link */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-plan-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: .8rem 1.5rem !important;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border: 1px solid var(--sw-brand-600) !important;
  border-radius: var(--sw-radius-sm) !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  font-weight: var(--sw-weight-semi) !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-plan-button:hover {
  background: var(--sw-brand-700) !important;
  border-color: var(--sw-brand-700) !important;
  box-shadow: var(--sw-shadow-brand) !important;
}

/* --- Stats strip -------------------------------------------------------- */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-stats-strip {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1rem clamp(1rem, .5rem + 2vw, 2.5rem) !important;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-lg) !important;
  box-shadow: var(--sw-shadow-sm) !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-stats-strip strong {
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display) !important;
  font-size: clamp(1.375rem, 1.2rem + .5vw, 1.65rem) !important;
  font-weight: var(--sw-weight-bold) !important;
  letter-spacing: -.025em !important;
  font-variant-numeric: tabular-nums;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-stats-strip span {
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs) !important;
  font-weight: var(--sw-weight-medium) !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-stats-strip i {
  width: 44px !important;
  height: 44px !important;
  color: var(--sw-brand-600) !important;
  background: var(--sw-brand-50) !important;
  border: 1px solid var(--sw-brand-100) !important;
  border-radius: var(--sw-radius-md) !important;
  font-size: 1.1rem !important;
}

/* --- Pricing block on the home page ----------------------------------- */
html body.nedate-ui-standard .welcome-modern-pricing-section { background: var(--sw-canvas); }

/* Two columns, not three. The third was a decorative dashboard mock built
   from empty <span>/<i> elements that theme-arancio.css painted; with that
   file retired there is nothing left to draw, and rebuilding a fake product
   screenshot out of empty tags is a lot of CSS for a shape nobody reads.
   Copy left, the real plan card right — it also stops the section running to
   1700px tall for one price. */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px) !important;
  gap: clamp(2rem, 1rem + 3vw, 4.5rem) !important;
  align-items: center !important;
  justify-content: center;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-visual { display: none !important; }
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .875rem;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-copy > small {
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs) !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-points {
  display: grid;
  gap: .875rem;
  width: 100%;
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--sw-line);
  list-style: none;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-points li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-points i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: .1rem;
  color: var(--sw-brand-600);
  background: var(--sw-brand-50);
  border: 1px solid var(--sw-brand-100);
  border-radius: var(--sw-radius-pill);
  font-size: .75rem;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-points strong {
  display: block;
  color: var(--sw-ink);
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-semi);
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-points span {
  color: var(--sw-muted);
  font-size: var(--sw-text-xs);
  line-height: 1.55;
}

/* A section that already owns its vertical rhythm does not need a second
   helping from a nested .py-5 container — that was stacking 91px + 48px. */
html body.nedate-public-standard :is(.welcome-modern-pricing-section, .welcome-modern-body-section)
  > .container:is(.py-5, .py-6) {
  padding-block: 0 !important;
}
html body.nedate-ui-standard .welcome-modern-pricing-main-card {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-xl);
  box-shadow: var(--sw-shadow-lg);
}

/* --- Price lockup --------------------------------------------------------
   .pricing-login-price is a CONTAINER (eyebrow + figure + footnote), not the
   figure itself. Styling it as the numeral set letter-spacing: -.03em, which
   computes to -1.36px against the container's 45px font and is then inherited
   verbatim by its 10px children — that is what collapsed "A partire da" into
   "Aparlreda". The container stays neutral; only the numeral is display type. */
html body.nedate-ui-standard.nedate-public-standard .pricing-login-price {
  letter-spacing: normal !important;
  font-size: 1rem !important;
  font-weight: var(--sw-weight-normal) !important;
  font-family: var(--sw-font-body) !important;
  line-height: 1.5 !important;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-login-price > :is(span, p):not([class*="price"]) {
  display: block;
  letter-spacing: normal !important;
  font-family: var(--sw-font-body) !important;
  font-size: var(--sw-text-xs) !important;
  font-weight: var(--sw-weight-medium) !important;
  line-height: 1.5 !important;
  color: var(--sw-muted) !important;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-login-price > span:first-child {
  margin-bottom: .25rem;
  font-weight: var(--sw-weight-semi) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}

html body.nedate-ui-standard :is(.pricing-modern-price-val, .price-val, .welcome-modern-plan-price) {
  font-family: var(--sw-font-display) !important;
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem) !important;
  font-weight: var(--sw-weight-bold) !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  color: var(--sw-ink) !important;
  font-variant-numeric: tabular-nums;
}
html body.nedate-ui-standard .pricing-modern-price-row {
  display: flex;
  align-items: baseline;
  gap: .2rem;
}
html body.nedate-ui-standard .pricing-modern-price-currency {
  align-self: flex-start;
  margin-top: .35rem;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display);
  font-size: 1.35rem !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard .pricing-modern-price-period {
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-medium) !important;
}
html body.nedate-ui-standard :is(.pricing-modern-price-meta, .pricing-modern-setup, .welcome-modern-plan-note) {
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs) !important;
}

/* Feature ticks */
html body.nedate-ui-standard .pricing-modern-features { display: grid; gap: .6rem; margin: 1.25rem 0; padding: 0; list-style: none; }
html body.nedate-ui-standard .pricing-modern-feature {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  color: var(--sw-body);
  font-size: var(--sw-text-sm);
  line-height: 1.5;
}
html body.nedate-ui-standard .pricing-modern-feature-yes { color: var(--sw-success) !important; flex: 0 0 auto; margin-top: .12rem; }
html body.nedate-ui-standard .pricing-modern-feature-no  { color: var(--sw-faint) !important;  flex: 0 0 auto; margin-top: .12rem; }

/* Dashboard mock next to the pricing block */
html body.nedate-ui-standard :is(.welcome-modern-dashboard-card, .pricing-modern-dashboard-preview) {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-lg);
  box-shadow: var(--sw-shadow-md);
  overflow: hidden;
}
html body.nedate-ui-standard :is(.welcome-modern-dashboard-ring, .pricing-modern-dashboard-progress) {
  background: conic-gradient(var(--sw-brand-600) 0 62%, var(--sw-surface-3) 62% 100%) !important;
}
html body.nedate-ui-standard :is(.welcome-modern-dashboard-chart span, .pricing-modern-chart-line) {
  background: var(--sw-brand-500) !important;
}
html body.nedate-ui-standard .welcome-modern-plant { filter: saturate(.7) hue-rotate(-8deg); opacity: .9; }

/* --- CTA banner --------------------------------------------------------- */
/* nedate-page-system.css turns the SECTION itself into the navy banner
   (gradient, 12px radius, drop shadow). With the banner rebuilt on the inner
   grid, leaving those on the section produced a second, empty floating panel
   around it. The section goes back to being a plain section. */
html body.nedate-ui-standard.nedate-public-standard :is(.welcome-modern-cta, .landing-cta-banner) {
  padding-block: var(--sw-section-y) !important;
  background: var(--sw-canvas) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* "Nessuna carta richiesta" sits on the navy panel and was barely legible */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-cta-actions small {
  color: var(--sw-on-dark-muted) !important;
  font-size: var(--sw-text-xs) !important;
}
html body.nedate-ui-standard .welcome-modern-cta-grid,
html body.nedate-ui-standard .landing-cta-banner > .container > * {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  background:
    radial-gradient(620px 300px at 85% 10%, rgba(240, 70, 81, .16), transparent 70%),
    linear-gradient(140deg, var(--sw-navy-950), var(--sw-navy-800)) !important;
  border-radius: var(--sw-radius-xl);
  box-shadow: var(--sw-shadow-lg);
}
html body.nedate-ui-standard .welcome-modern-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* FAQ strip */
html body.nedate-ui-standard .welcome-modern-faq-strip { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); background: var(--sw-surface); border-top: 1px solid var(--sw-line); }
html body.nedate-ui-standard .welcome-modern-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
/* The strip's four questions were <button>s carrying a chevron and no handler:
   an accordion that never opened, under no heading at all. They are links to
   the FAQ page now, so the surface the legacy sheet grants
   `.welcome-modern-faq-grid button` is restated here for `a`. */
html body.nedate-ui-standard .welcome-modern-faq-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
html body.nedate-ui-standard[class][class] .welcome-modern-faq-head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
}
html body.nedate-ui-standard[class][class] .welcome-modern-faq-grid a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  min-height: 3.25rem;
  padding: .8rem 1rem;
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-sm) !important;
  font-size: .82rem;
  font-weight: var(--sw-weight-semi) !important;
  text-decoration: none !important;
  transition: border-color var(--sw-dur-fast) var(--sw-ease), background var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard[class][class] .welcome-modern-faq-grid a:hover {
  border-color: var(--sw-brand-300) !important;
  background: var(--sw-brand-50) !important;
}
html body.nedate-ui-standard[class][class] .welcome-modern-faq-grid a i {
  flex: 0 0 auto;
  color: var(--sw-brand-600) !important;
}


/* =========================================================================
   10 · PRICING · FAQ · TRACKING · CONTACT
   ========================================================================= */

html body.nedate-public-standard :is(.pricing-modern-page, .faq-modern-page, .contact-modern-page,
  .tracking-login-page, .pricing-login-page, .faq-login-page) {
  background: var(--sw-canvas);
}

/* --- Plan cards --------------------------------------------------------- */
html body.nedate-ui-standard .pricing-modern-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-xl) !important;
  box-shadow: var(--sw-shadow-sm) !important;
  transition: border-color var(--sw-dur) var(--sw-ease), box-shadow var(--sw-dur) var(--sw-ease), transform var(--sw-dur) var(--sw-ease);
}
html body.nedate-ui-standard .pricing-modern-card:hover { border-color: var(--sw-line-strong) !important; box-shadow: var(--sw-shadow-md) !important; transform: translateY(-2px); }
html body.nedate-ui-standard .pricing-modern-card--featured {
  border-color: var(--sw-brand-300) !important;
  box-shadow: 0 0 0 1px var(--sw-brand-200), var(--sw-shadow-lg) !important;
}
html body.nedate-ui-standard .pricing-modern-card-body { display: flex; flex-direction: column; flex: 1; }
html body.nedate-ui-standard .pricing-modern-plan-btn { margin-top: auto; width: 100%; }
html body.nedate-ui-standard .pricing-modern-plan-name {
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display);
  font-size: var(--sw-text-h4) !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard .pricing-modern-plan-desc { color: var(--sw-muted) !important; font-size: var(--sw-text-sm) !important; }
html body.nedate-ui-standard .pricing-modern-billing-note,
html body.nedate-ui-standard .pricing-modern-trial { color: var(--sw-muted) !important; font-size: var(--sw-text-xs) !important; }
html body.nedate-ui-standard .pricing-modern-divider { border-color: var(--sw-line); }

/* Plan CTAs still arrive as gradients from the legacy sheets; the system uses
   one flat fill so the page has a single obvious action colour. */
html body.nedate-ui-standard[class][class] :is(.pricing-login-primary, .pricing-modern-plan-btn,
  .pricing-modern-cta-btn, .faq-login-primary, .tracking-login-submit, .contact-modern-submit,
  .faq-modern-primary-btn, .welcome-modern-plan-button) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  background-image: none !important;
  border: 1px solid var(--sw-brand-600) !important;
  border-radius: var(--sw-radius-sm) !important;
  box-shadow: none !important;
  font-family: var(--sw-font-body) !important;
  font-size: 1rem !important;
  font-weight: var(--sw-weight-semi) !important;
  text-transform: none !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard[class][class] :is(.pricing-login-primary, .pricing-modern-plan-btn,
  .pricing-modern-cta-btn, .faq-login-primary, .tracking-login-submit, .contact-modern-submit,
  .faq-modern-primary-btn, .welcome-modern-plan-button):hover {
  background: var(--sw-brand-700) !important;
  border-color: var(--sw-brand-700) !important;
  box-shadow: var(--sw-shadow-brand) !important;
}
/* A ghost variant still needs to read as secondary */
html body.nedate-ui-standard[class][class] .pricing-modern-cta-btn--ghost {
  color: #fff !important;
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .26) !important;
}

/* "Not included" is information, not an error — it should not be red. */
html body.nedate-ui-standard[class][class] :is(.pricing-modern-feature-no, .pricing-modern-feature.is-off i,
  .pricing-modern-features li.is-off i) {
  color: var(--sw-faint) !important;
}
html body.nedate-ui-standard[class][class] :is(.pricing-modern-feature-no, .pricing-modern-feature.is-off) span {
  color: var(--sw-muted) !important;
}
html body.nedate-ui-standard[class][class] .pricing-modern-feature-yes { color: var(--sw-success) !important; }

/* A tick means "included" — green reads as confirmation, brand red reads as
   decoration at best and as a warning at worst. */
html body.nedate-ui-standard[class][class] :is(.pricing-login-included, .pricing-modern-included,
  .pricing-login-panel, .pricing-modern-card, .faq-login-card, .pricing-login-benefits)
  :is(.bi-check-circle-fill, .bi-check2-circle, .bi-check-lg, .bi-check2) {
  color: var(--sw-success) !important;
}

/* --- FAQ accordion ------------------------------------------------------ */
html body.nedate-ui-standard :is(.accordion, .faq-modern-accordion) { --bs-accordion-border-color: var(--sw-line); display: grid; gap: .625rem; }
html body.nedate-ui-standard :is(.accordion-item, .faq-modern-item) {
  overflow: hidden;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-md) !important;
}
html body.nedate-ui-standard :is(.accordion-button, .faq-modern-question) {
  gap: .75rem;
  padding: 1rem 1.125rem !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--sw-font-body) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-semi) !important;
  text-align: left;
}
html body.nedate-ui-standard :is(.accordion-button:not(.collapsed), .faq-modern-item.is-open .faq-modern-question) {
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard .accordion-button::after {
  width: 1rem;
  height: 1rem;
  background-size: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23617087' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}
html body.nedate-ui-standard :is(.accordion-body, .faq-modern-answer, .faq-answer-content) {
  padding: 0 1.125rem 1.125rem !important;
  color: var(--sw-body) !important;
  font-size: var(--sw-text-sm);
  line-height: 1.65;
}
html body.nedate-ui-standard .faq-modern-question-text { flex: 1; min-width: 0; }

/* The "contact support" row is a filled brand panel; its <small> was left at
   the light-surface muted colour, which put dark grey on red. */
html body.nedate-ui-standard[class][class] .faq-login-support {
  display: flex !important;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.125rem !important;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--sw-radius-md) !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard[class][class] .faq-login-support :is(strong, small, span, i) {
  color: var(--sw-on-brand) !important;
}
html body.nedate-ui-standard[class][class] .faq-login-support strong {
  display: block;
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-semi);
}
/* nedate-unified.css paints every <small> inside the app shell a muted grey
   from a selector with specificity (3,14,3) — `html:not(#_):not(#__) body…
   [class]×8:not(.dark-mode)… #app3d > main`. Nothing sane out-specifies that,
   so the declaration now reads a token instead of a literal, and any panel
   that paints itself re-points the token for its own subtree. Inheritance
   wins where specificity cannot. */
html body.nedate-ui-standard .faq-login-support {
  --sw-ink-small: #ffffff;
  --sw-ink-body: #fff;
}
html body.nedate-ui-standard[class][class][class] .faq-login-support :is(small, .small) {
  display: block;
  color: var(--sw-on-brand) !important;
  font-size: var(--sw-text-xs);
}

/* The same trick, applied to every surface in the system that fills itself
   with brand or navy and therefore needs light secondary text. */
html body.nedate-ui-standard :is(.welcome-modern-how-section, .welcome-modern-cta,
  .landing-cta-banner, .pricing-modern-cta-section, .nedate-site-footer, .sw-on-dark,
  .adm-sidebar, .nedate-sidebar) {
  --sw-ink-small: var(--sw-on-dark-muted);
  --sw-ink-body: var(--sw-on-dark-body);
  --sw-ink-label: var(--sw-on-dark-muted);
}

/* …and handed straight back on any light card nested inside one of those.
   Tokens inherit, so without this the white tracking-preview card sitting in
   the navy band would draw its timestamps in near-white on white. */
html body.nedate-ui-standard :is(.welcome-modern-how-section, .welcome-modern-cta,
  .landing-cta-banner, .pricing-modern-cta-section, .sw-on-dark)
  :is(.card, .tool-card, .welcome-modern-tracking-preview, .nedate-section-card, .sw-card,
      .pricing-modern-card, .white-card) {
  --sw-ink-small: var(--sw-muted);
  --sw-ink-body: var(--sw-body);
  --sw-ink-label: var(--sw-muted);
}
html body.nedate-ui-standard[class][class] .faq-login-support > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .16) !important;
  border-radius: var(--sw-radius-sm);
}
html body.nedate-ui-standard[class][class] .faq-login-support:hover {
  background: var(--sw-brand-700) !important;
}

/* FAQ category tiles / search */
html body.nedate-ui-standard .faq-modern-visual-row,
html body.nedate-ui-standard .faq-login-preview-flow > * {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-md);
  font-size: var(--sw-text-sm);
  transition: border-color var(--sw-dur-fast) var(--sw-ease), background var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .faq-modern-visual-row:hover { border-color: var(--sw-brand-200); background: var(--sw-brand-50); }
html body.nedate-ui-standard .faq-modern-visual-row--active {
  color: var(--sw-brand-700);
  background: var(--sw-brand-50);
  border-color: var(--sw-brand-300);
}
html body.nedate-ui-standard .faq-modern-visual-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .25rem .25rem .875rem;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line-strong);
  border-radius: var(--sw-radius-sm);
}
html body.nedate-ui-standard .faq-modern-back-top {
  color: var(--sw-muted) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-pill) !important;
  box-shadow: var(--sw-shadow-md) !important;
}

/* --- Tracking ----------------------------------------------------------- */
html body.nedate-ui-standard :is(.tracking-login-card, .tracking-login-form-shell) {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-xl) !important;
  box-shadow: var(--sw-shadow-lg) !important;
}
html body.nedate-ui-standard .tracking-login-input-wrap { position: relative; }
html body.nedate-ui-standard .tracking-login-input-icon { color: var(--sw-muted); }
/* Tracking codes read better in the mono face */
html body.nedate-ui-standard :is(input[name="label"], input[name="tracking"], .tracking-login-form input[type="text"]) {
  font-family: var(--sw-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}



html body.nedate-ui-standard .tracking-login-helper { color: var(--sw-muted) !important; font-size: var(--sw-text-xs) !important; }
html body.nedate-ui-standard .tracking-login-divider { border-color: var(--sw-line) !important; }
/* sw-flat-white/dark: tracking ambient layers off (no pink radial) */
html body.nedate-ui-standard :is(.tracking-login-gradient, .tracking-login-ambient, .tracking-login-grid-bg) {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html body.nedate-ui-standard .tracking-login-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  text-align: center;
}
html body.nedate-ui-standard .tracking-login-preview__status.is-current { color: var(--sw-brand-700) !important; }
html body.nedate-ui-standard .tracking-login-preview__status.is-complete { color: var(--sw-success) !important; }
html body.nedate-ui-standard .tracking-login-preview__route { border-color: var(--sw-line) !important; }
html body.nedate-ui-standard .tracking-login-preview__parcel { background: var(--sw-brand-600) !important; color: var(--sw-on-brand) !important; }

/* --- Last of the old palettes ------------------------------------------
   A final pocket of hardcoded colour in nedate-unified.css: the FAQ
   "redesign" variant in burnt orange (#c2410c / #ff7a1a), the pricing accent
   line in #ff5a1f, and two teal eyebrows. All of it sits above the component
   rules in section 07, so it is reconciled here in one place. */
html body.nedate-ui-standard[class][class] :is(.faq-redesign-section-icon,
  .faq-redesign-category-icon, .faq-redesign-stats-card > span, .faq-redesign-list-head > span,
  .faq-redesign-card-head > span, .faq-redesign-category-link:hover strong) {
  color: var(--sw-brand-600) !important;
  background: var(--sw-brand-50) !important;
  border-color: var(--sw-brand-100) !important;
}
html body.nedate-ui-standard[class][class] :is(.faq-redesign-search-btn,
  .faq-redesign-support-btn, .btn-primary-custom) {
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  background-image: none !important;
  border-color: var(--sw-brand-600) !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard[class][class] :is(.faq-redesign-search-btn,
  .faq-redesign-support-btn, .btn-primary-custom):hover {
  background: var(--sw-brand-700) !important;
  background-image: none !important;
  border-color: var(--sw-brand-700) !important;
  box-shadow: var(--sw-shadow-brand) !important;
}
html body.nedate-ui-standard[class][class] .contact-refresh-eyebrow {
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
  border: 1px solid var(--sw-brand-100) !important;
}
/* "Richiesta protetta" is a security assurance, so it keeps a green — but the
   system's green, and with enough contrast to actually read. */
html body.nedate-ui-standard[class][class] .contact-modern-form-card__badge {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem !important;
  color: #0b5c40 !important;
  background: var(--sw-success-bg) !important;
  border: 1px solid color-mix(in srgb, var(--sw-success) 28%, transparent) !important;
  border-radius: var(--sw-radius-pill) !important;
  font-size: .6875rem !important;
  font-weight: var(--sw-weight-semi) !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
}
html body.nedate-ui-standard[class][class] .contact-modern-form-card__badge :is(i, span) {
  color: inherit !important;
}
/* The split-headline accent, on every page that uses it */
html body.nedate-ui-standard[class][class] :is(.pricing-modern-title-accent,
  .welcome-modern-title-accent, .contact-modern-title-line, .tracking-modern-title-accent) {
  color: var(--sw-brand-600) !important;
  background: none !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* --- Contact ------------------------------------------------------------ */
html body.nedate-ui-standard .contact-modern-form-card {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-xl);
  box-shadow: var(--sw-shadow-lg);
}
html body.nedate-ui-standard .contact-modern-form { display: grid; gap: 1rem; }
html body.nedate-ui-standard .contact-modern-topic-bar { display: flex; flex-wrap: wrap; gap: .5rem; }
html body.nedate-ui-standard .contact-modern-topic-chip {
  padding: .45rem .9rem;
  color: var(--sw-body);
  background: var(--sw-surface-2);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-pill);
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-medium);
  cursor: pointer;
  transition: all var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .contact-modern-topic-chip:hover,
html body.nedate-ui-standard .contact-modern-topic-chip.is-active,
html body.nedate-ui-standard .contact-modern-topic-chip[aria-pressed="true"] {
  color: var(--sw-brand-700);
  background: var(--sw-brand-50);
  border-color: var(--sw-brand-300);
}
html body.nedate-ui-standard .contact-modern-hp { position: absolute !important; left: -9999px !important; }
html body.nedate-ui-standard .contact-modern-alert--success { color: #0b5c40; background: var(--sw-success-bg); border-color: var(--sw-success); }


/* =========================================================================
   11 · AUTH
   ========================================================================= */

html body.nedate-ui-standard .login-page { background: var(--sw-canvas); }
html body.nedate-ui-standard .login-page .login-page__card {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-xl) !important;
  box-shadow: var(--sw-shadow-lg) !important;
}
html body.nedate-ui-standard .login-page input.login-page__input.form-control {
  min-height: 48px;
  border-radius: var(--sw-radius-sm) !important;
  font-size: 1rem;
}
/* The login/register tab pair is painted orange by nedate-unified.css at a
   higher specificity than the segmented-control rule in section 06. */
/* Aggiornate alla §53: la voce scelta e' piena di marchio, non rosa chiaro. */
html body.nedate-auth-standard :is(.login-page__tabs .nav-link.active, .register-page__type-btn.active) {
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border-color: transparent !important;
}
html body.nedate-auth-standard :is(.login-page__tabs .nav-link, .register-page__type-btn) {
  min-height: 44px;
  border-radius: var(--sw-radius-sm) !important;
  font-weight: var(--sw-weight-semi);
}

html body.nedate-ui-standard .login-page__features { display: grid; gap: .875rem; margin: 0; padding: 0; list-style: none; }
html body.nedate-ui-standard .login-page__features li { display: flex; align-items: flex-start; gap: .75rem; color: var(--sw-body); font-size: var(--sw-text-sm); }
html body.nedate-ui-standard .login-page #btn-register,
html body.nedate-ui-standard .login-page #btn-login { width: 100%; min-height: 50px; }


/* =========================================================================
   12 · FOOTER
   ========================================================================= */

html body.nedate-ui-standard .nedate-site-footer {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  color: var(--sw-on-dark-body);
  background: var(--sw-navy-950) !important;
  border-top: 0;
}
html body.nedate-ui-standard .nedate-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(120px, 1fr)) minmax(220px, 1.3fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
html body.nedate-ui-standard .nedate-footer-logo-img { max-width: 150px; height: auto; }
html body.nedate-ui-standard .nedate-footer-brand p {
  margin-top: .875rem;
  color: var(--sw-on-dark-muted) !important;
  font-size: var(--sw-text-sm);
  line-height: 1.6;
  max-width: 34ch;
}
html body.nedate-ui-standard .nedate-footer-column :is(h6, .nedate-footer-heading),
html body.nedate-ui-standard .nedate-footer-newsletter :is(h6, .nedate-footer-heading) {
  margin-bottom: 1rem;
  color: var(--sw-on-dark) !important;
  font-family: var(--sw-font-body) !important;
  font-size: .6875rem !important;
  font-weight: var(--sw-weight-semi) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}
html body.nedate-ui-standard .nedate-footer-column { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
html body.nedate-ui-standard .nedate-footer-column a {
  color: var(--sw-on-dark-body) !important;
  font-size: var(--sw-text-sm);
  text-decoration: none;
  transition: color var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .nedate-footer-column a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: .2em; }

html body.nedate-ui-standard .nedate-footer-newsletter p { color: var(--sw-on-dark-muted) !important; font-size: var(--sw-text-sm); margin-bottom: .75rem; }
html body.nedate-ui-standard .nedate-footer-newsletter-form {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
html body.nedate-ui-standard .nedate-footer-email-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: .6rem .875rem;
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: var(--sw-field-radius, 5px) !important;
  font-family: var(--sw-font-label) !important;
  font-weight: var(--sw-weight-light, 300) !important;
  font-size: var(--sw-control-fs, 15px) !important;
}
html body.nedate-ui-standard .nedate-footer-email-input::placeholder {
  color: rgba(229, 238, 250, .45);
  font-family: var(--sw-font-label) !important;
  font-weight: var(--sw-weight-light, 300) !important;
}
html body.nedate-ui-standard .nedate-footer-email-input:focus {
  background: rgba(255, 255, 255, .1) !important;
  border-color: var(--sw-brand-400) !important;
  box-shadow: 0 0 0 3px rgba(240, 70, 81, .22) !important;
}
html body.nedate-ui-standard .nedate-footer-email-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border: 0 !important;
  border-radius: var(--sw-radius-sm) !important;
}
html body.nedate-ui-standard .nedate-footer-email-button:hover { background: var(--sw-brand-700) !important; }

/* Payment marks — greyscale so they read as a strip, not five logos */
html body.nedate-ui-standard .nedate-footer-payments { margin-top: 1.25rem; }
html body.nedate-ui-standard .nedate-footer-payments > div { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
html body.nedate-ui-standard .nedate-footer-payments img {
  height: 26px;
  width: auto;
  padding: .2rem .35rem;
  background: rgba(255, 255, 255, .92);
  border-radius: 5px;
  opacity: .85;
  transition: opacity var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .nedate-footer-payments img:hover { opacity: 1; }

html body.nedate-ui-standard .nedate-footer-socials { display: flex; gap: .5rem; margin-top: 1rem; }
html body.nedate-ui-standard .nedate-footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--sw-on-dark-body) !important;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--sw-radius-sm);
  transition: background var(--sw-dur-fast) var(--sw-ease), color var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .nedate-footer-socials a:hover { color: var(--sw-on-brand) !important; background: var(--sw-brand-600); border-color: var(--sw-brand-600); }

html body.nedate-ui-standard .nedate-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
  color: var(--sw-on-dark-muted) !important;
  font-size: var(--sw-text-xs);
}
html body.nedate-ui-standard .nedate-footer-bottom-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
html body.nedate-ui-standard :is(.nedate-footer-language-trigger, .nedate-footer-theme-pill) {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: .35rem .75rem;
  color: var(--sw-on-dark-body) !important;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--sw-radius-sm);
  font-size: var(--sw-text-xs);
  list-style: none;
  cursor: pointer;
}
html body.nedate-ui-standard :is(.nedate-footer-language-trigger, .nedate-footer-theme-pill):hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .12);
}
html body.nedate-ui-standard .nedate-footer-language-trigger::-webkit-details-marker { display: none; }
html body.nedate-ui-standard .nedate-footer-language-menu {
  min-width: 180px;
  padding: .375rem;
  background: var(--sw-navy-800);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--sw-radius-md);
  box-shadow: var(--sw-shadow-lg);
}
html body.nedate-ui-standard .nedate-footer-language-option {
  display: block;
  width: 100%;
  padding: .5rem .625rem;
  color: var(--sw-on-dark-body) !important;
  background: none;
  border: 0;
  border-radius: var(--sw-radius-xs);
  text-align: left;
  font-size: var(--sw-text-sm);
  cursor: pointer;
}
html body.nedate-ui-standard .nedate-footer-language-option:hover { color: #fff !important; background: rgba(255, 255, 255, .1); }


/* =========================================================================
   13 · APP SHELL · TABLES · ADMIN
   ========================================================================= */

/* --- Page shell ---------------------------------------------------------
   .nedate-section-card is the workhorse of the authenticated product — 725
   instances across the user and admin views — so it carries most of the
   perceived quality of the app. .nedate-page-hero is the page header above it. */
html body.nedate-ui-standard :is(.nedate-app-page, .nedate-main-container, .pages-wrapper) {
  background: var(--sw-canvas);
}

html body.nedate-ui-standard .nedate-page-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sw-space-5);
  padding: 0 0 1.25rem;
  background: none;
  border-bottom: 1px solid var(--sw-line);
}
html body.nedate-ui-standard .nedate-page-hero :is(h1, h2, .display-6) {
  margin: 0;
  font-size: var(--sw-text-h3) !important;
  font-weight: var(--sw-weight-bold) !important;
  color: var(--sw-ink) !important;
}
html body.nedate-ui-standard .nedate-page-hero p {
  margin: .25rem 0 0;
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-sm);
}

html body.nedate-ui-standard :is(.nedate-section-card, .white-card, .wallet-section-card,
  .user-api-card, .notif-card, .tracking-panel, .user-returns-show-card,
  .user-invoices-card, .shipping-card) {
  padding: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  box-shadow: var(--sw-shadow-sm) !important;
}
html body.nedate-ui-standard .nedate-section-card > :is(h2, h3, h4, h5, .card-title) {
  margin: 0 0 .25rem;
  font-size: var(--sw-text-h4) !important;
  font-weight: var(--sw-weight-semi) !important;
  color: var(--sw-ink) !important;
}

/* KPI tiles */
html body.nedate-ui-standard :is(.b2-kpi, .kpi-card, .nedate-stat-card) {
  padding: 1.125rem;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-lg);
  box-shadow: var(--sw-shadow-xs);
}
html body.nedate-ui-standard :is(.nedate-stat-value, .stat-value, .b2-kpi strong) {
  font-family: var(--sw-font-display);
  font-size: clamp(1.5rem, 1.3rem + .7vw, 2rem);
  font-weight: var(--sw-weight-bold);
  letter-spacing: -.025em;
  color: var(--sw-ink);
}

/* Soft badges and square icon chips used all over the admin */
html body.nedate-ui-standard .nedate-soft-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .55rem;
  color: var(--sw-muted);
  background: var(--sw-surface-2);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-pill);
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-medium);
}
html body.nedate-ui-standard .icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sw-brand-600);
  background: var(--sw-brand-50);
  border: 1px solid var(--sw-brand-100);
  border-radius: var(--sw-radius-sm);
}

/* Unit suffix used by the shipping forms */
html body.nedate-ui-standard .pe-unit { color: var(--sw-muted); font-size: var(--sw-text-sm); }

/* user-modern.css squares off every input on the logistics and returns pages
   (`border-radius: 0 !important`), so those screens looked like a different
   product from the rest of the app. Brought back onto the shared control. */
html body.nedate-ui-standard[class][class] :is(.logistics-page, .logistics-categories-page,
  .logistics-stocks-page, .logistics-transfers-page, .logistics-warehouses-page,
  .logistics-product-form-page, .returns-create-page, .returns-show-page,
  .settings-like-form-page, .growth-suite-page, .monitoring-page, .modern-page)
  :is(.form-control, .form-select, textarea, select) {
  min-height: 48px;
  border-radius: var(--sw-radius-sm) !important;
  border-color: var(--sw-line-strong) !important;
}

/* "Neutral" KPI icons stay informational blue, but the platform's blue. */
html body.nedate-ui-standard :is(.kpi-icon-neutral, .nedate-kpi-neutral) {
  color: var(--sw-info) !important;
  background: var(--sw-info-bg) !important;
}

/* The shipping flow reuses the public hero pattern */
html body.nedate-ui-standard .shipping-hero-panel {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-xl);
  box-shadow: var(--sw-shadow-md);
}
html body.nedate-ui-standard .shipping-hero-visual { filter: saturate(.85); }

/* --- Tables ------------------------------------------------------------- */
html body.nedate-ui-standard :is(.table, table.dataTable, .nedate-data-table) {
  --bs-table-bg: transparent;
  width: 100%;
  color: var(--sw-body);
  border-color: var(--sw-line);
  font-size: var(--sw-text-sm);
}
html body.nedate-ui-standard :is(.table, .nedate-data-table) > :not(caption) > * > * {
  padding: .75rem .875rem;
  background: transparent;
  vertical-align: middle;
}
html body.nedate-ui-standard :is(.table, .nedate-data-table) thead th {
  color: var(--sw-muted);
  background: var(--sw-surface-2);
  border-bottom: 1px solid var(--sw-line);
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
html body.nedate-ui-standard :is(.table, .nedate-data-table) tbody tr { border-bottom: 1px solid var(--sw-line); }
html body.nedate-ui-standard :is(.table, .nedate-data-table) tbody tr:last-child { border-bottom: 0; }
html body.nedate-ui-standard .table-hover tbody tr:hover > * { background: var(--sw-brand-50); }
html body.nedate-ui-standard :is(.table-responsive, .nedate-table-responsive) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-md);
}
html body.nedate-ui-standard :is(.table-responsive, .nedate-table-responsive) > :is(.table, .nedate-data-table) {
  margin-bottom: 0;
}
/* Tracking codes, order ids and money columns */
html body.nedate-ui-standard :is(.table, .nedate-data-table) .font-monospace {
  font-family: var(--sw-font-mono);
  font-size: .875em;
  letter-spacing: .01em;
}

/* --- Sidebar ------------------------------------------------------------ */
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar, #sidebar, .app-sidebar) {
  background: var(--sw-navy-950) !important;
  border-right: 1px solid rgba(255, 255, 255, .07) !important;
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) :is(.sb-link, .sb-sub-link) {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 40px;
  padding: .5rem .7rem;
  color: var(--sw-on-dark-body) !important;
  border-radius: var(--sw-radius-xs) !important;
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-medium);
  text-decoration: none;
  transition: color var(--sw-dur-fast) var(--sw-ease), background var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) :is(.sb-link, .sb-sub-link):hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) :is(.sb-link, .sb-sub-link).active,
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[aria-current="page"] {
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  font-weight: var(--sw-weight-semi);
}
/* Il rosso pieno vuol dire una cosa sola: «la pagina che stai guardando e'
   questa». I titoli di gruppo sono `div.sb-link`, le voci vere sono `a.sb-link`
   e `.sb-sub-link`: prima prendevano tutti lo stesso fondo, e dentro
   Impostazioni la barra mostrava due blocchi rossi uno sopra l'altro — il
   titolo del gruppo e la voce corrente — indistinguibili. Ora il titolo, che sia
   aperto o che contenga la pagina corrente, e' solo un fondo schiarito. */
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) div.sb-link:is(.active, .is-open) {
  color: #fff !important;
  background: rgba(255, 255, 255, .09) !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) div.sb-link:is(.active, .is-open) i.main-icon {
  color: var(--sw-brand-400, #f0525f) !important;
}

/* `.sb-link` nasce con `white-space: nowrap`: sei voci su ventisette uscivano
   dal bordo della barra e venivano tagliate senza dirlo — «Richieste di
   assistenza» arrivava a 209px in uno spazio da 163. Le voci lunghe vanno a
   capo, come gia' fanno le sotto-voci. A barra chiusa il testo e' nascosto,
   quindi li' non cambia niente. */
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar):not(.collapsed) :is(.sb-link, .sb-sub-link) {
  white-space: normal !important;
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-link .sb-text {
  min-width: 0 !important;
  line-height: 1.25 !important;
  overflow-wrap: break-word !important;
}

/* Al buio ogni voce del menu diventava rosa. Colpa di una regola generica del
   foglio di sistema — «in tema scuro ogni `a` che non sia un bottone prende il
   colore d'accento» — che pesa (0,4,2) e batte le regole della barra, ferme a
   (0,3,2): le sotto-voci uscivano tutte #fc959c, come se fossero tutte
   selezionate. Qui si rimette il colore giusto con un peso piu' alto, lasciando
   fuori `.active` e `:hover` perche' quelli devono restare come sono. */
html[data-theme="dark"]  body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar, .drawer-sb) :is(a.sb-link, .sb-flyout a):not(.active):not(:hover),
html[data-bs-theme="dark"] body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar, .drawer-sb) :is(a.sb-link, .sb-flyout a):not(.active):not(:hover),
body.dark-mode.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar, .drawer-sb) :is(a.sb-link, .sb-flyout a):not(.active):not(:hover) {
  color: var(--sw-on-dark-body) !important;
}
html[data-theme="dark"]  body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar, .drawer-sb) a.sb-sub-link:not(.active):not(:hover),
html[data-bs-theme="dark"] body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar, .drawer-sb) a.sb-sub-link:not(.active):not(:hover),
body.dark-mode.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar, .drawer-sb) a.sb-sub-link:not(.active):not(:hover) {
  color: var(--sw-on-dark-muted) !important;
}

/* `.sb-text` porta un `margin-left: 1rem` di eredita', ma il contenitore e' gia'
   un flex con `gap: .7rem`: 27px fra icona e scritta invece di 11, e alla voce
   piu' lunga mancavano due pixel per stare su una riga — «Impostazioni» si
   spezzava in «Impostazion» + «i». Tolto il margine doppio. */
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-link .sb-text {
  margin-left: 0 !important;
}

html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-sub-link {
  min-height: 34px;
  padding-left: 1.6rem;
  font-size: var(--sw-text-xs);
  color: var(--sw-on-dark-muted) !important;
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-subsection-toggle,
html body.nedate-ui-standard .sb-flyout .sb-subsection-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  min-height: 34px;
  padding: .45rem .8rem .45rem 1.35rem;
  color: var(--sw-on-dark-muted);
  background: transparent;
  border: 0;
  border-radius: var(--sw-radius-xs);
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-semi);
  text-align: left;
  cursor: pointer;
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-subsection-toggle:hover,
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-subsection-toggle.active,
html body.nedate-ui-standard .sb-flyout .sb-subsection-toggle:hover,
html body.nedate-ui-standard .sb-flyout .sb-subsection-toggle.active {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}
html body.nedate-ui-standard .sb-subsection-toggle > i {
  flex: 0 0 auto;
  font-size: .72rem;
  opacity: .68;
  transition: transform var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-subsection-items .sb-sub-link {
  padding-left: 2.35rem;
}
html body.nedate-ui-standard .sb-flyout .sb-subsection-items a {
  padding-left: 1.7rem;
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-section-cap {
  padding: 1rem .7rem .35rem;
  color: rgba(229, 238, 250, .45) !important;
  font-size: .625rem;
  font-weight: var(--sw-weight-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-divider {
  margin: .6rem .7rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-arrow {
  margin-left: auto;
  color: rgba(229, 238, 250, .45);
  transition: transform var(--sw-dur) var(--sw-ease);
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-accordion[open] > * > .sb-arrow,
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-link[aria-expanded="true"] .sb-arrow {
  transform: rotate(180deg);
}
/* `.sb-collapsed-tooltip-target + *` voleva dire «il pannello che segue il
   titolo di un gruppo», ma prende QUALUNQUE fratello successivo: misurati
   27 elementi colpiti, comprese le voci semplici e i titolini di sezione,
   che si ritrovavano cornice, fondo e ombra da pannello. Ristretto a quello
   che serviva davvero. */
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) :is(.sb-flyout, .sb-collapsed-tooltip-target + .sb-accordion) {
  background: var(--sw-navy-850) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: var(--sw-radius-md) !important;
  box-shadow: var(--sw-shadow-lg) !important;
}
html body.nedate-ui-standard :is(.adm-sidebar, .nedate-sidebar) .sb-flyout-header {
  color: var(--sw-on-dark) !important;
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-semi);
}
html body.nedate-ui-standard .sb-notification-dot { background: var(--sw-brand-500) !important; }
html body.nedate-ui-standard .sb-pro-card {
  margin: .7rem;
  padding: 1rem;
  background: linear-gradient(150deg, rgba(240, 70, 81, .16), rgba(240, 70, 81, .05)) !important;
  border: 1px solid rgba(240, 70, 81, .26) !important;
  border-radius: var(--sw-radius-md) !important;
}
html body.nedate-ui-standard .sb-pro-card :is(.sb-pro-copy, p) { color: var(--sw-on-dark-body) !important; font-size: var(--sw-text-xs); }
html body.nedate-ui-standard .sb-pro-icon { color: var(--sw-brand-300) !important; }
html body.nedate-ui-standard .sb-pro-button {
  width: 100%;
  margin-top: .6rem;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border: 0 !important;
  border-radius: var(--sw-radius-xs) !important;
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-semi);
}
html body.nedate-ui-standard :is(.sb-panel-header, .sb-panel-title) {
  color: var(--sw-on-dark) !important;
  background: rgba(255, 255, 255, .04) !important;
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-weight-semi);
}
html body.nedate-ui-standard .sb-panel-btn {
  color: var(--sw-on-dark-muted) !important;
  background: transparent !important;
  border: 0 !important;
}
html body.nedate-ui-standard .sb-panel-btn:hover { color: #fff !important; }

/* Pagination */
html body.nedate-ui-standard .page-link {
  color: var(--sw-body);
  border-color: var(--sw-line);
  border-radius: var(--sw-radius-xs) !important;
  margin-inline: 2px;
  font-size: var(--sw-text-sm);
}
html body.nedate-ui-standard .page-item.active .page-link {
  color: var(--sw-on-brand);
  background: var(--sw-brand-600);
  border-color: var(--sw-brand-600);
}

/* Progress */
html body.nedate-ui-standard .progress { height: 8px; background: var(--sw-surface-3); border-radius: var(--sw-radius-pill); }
html body.nedate-ui-standard .progress-bar { color: var(--sw-on-brand); background: var(--sw-brand-600); }

/* Modals */
html body.nedate-ui-standard .modal-content {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-radius-xl);
  box-shadow: var(--sw-shadow-lg);
}
html body.nedate-ui-standard :is(.modal-header, .modal-footer) { border-color: var(--sw-line); padding: 1.125rem 1.375rem; }
html body.nedate-ui-standard .modal-body { padding: 1.375rem; }

/* Tooltips */
html body.nedate-ui-standard .tooltip-inner {
  padding: .4rem .6rem;
  background: var(--sw-navy-900);
  border-radius: var(--sw-radius-xs);
  font-size: var(--sw-text-xs);
}

/* Live-chat widget — was a hard red gradient of its own */
html body.nedate-ui-standard .nedate-chat-launcher {
  width: 56px;
  height: 56px;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  box-shadow: var(--sw-shadow-brand) !important;
  font-size: 1.35rem;
}
html body.nedate-ui-standard .nedate-chat-launcher:hover { background: var(--sw-brand-700) !important; }
html body.nedate-ui-standard .nedate-chat-launcher__pulse { border-color: rgba(240, 70, 81, .38) !important; }
html body.nedate-ui-standard .nedate-chat-panel__header {
  /* era var(--sw-navy-900): l'intestazione della chat ora e' una superficie
     come le altre schede del sito, il brand resta accento */
  background: var(--sw-surface) !important;
  color: var(--sw-ink) !important;
}
html body.nedate-ui-standard .nedate-chat-panel { border-radius: var(--sw-radius-lg); box-shadow: var(--sw-shadow-lg); }


/* =========================================================================
   14 · RESPONSIVE · MOTION · PRINT
   ========================================================================= */

/* --- ≤ 1200px: tighten the hero split ---------------------------------- */
@media (max-width: 1200px) {
  html body.nedate-public-standard :is(.pricing-modern-hero__grid) { gap: 2rem; }
  html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  html body.nedate-ui-standard .welcome-modern-pricing-visual { display: none; }
  html body.nedate-ui-standard .nedate-footer-grid { grid-template-columns: minmax(200px, 1.2fr) repeat(2, minmax(120px, 1fr)) minmax(200px, 1.2fr); }
}

/* --- ≤ 992px: single column ------------------------------------------- */
@media (max-width: 959.98px) {
  html body.nedate-public-standard :is(.pricing-modern-hero__grid, .welcome-modern-how-grid,
    .welcome-modern-pricing-layout, .faq-modern-hero .row, .tracking-login-grid, .pricing-login-grid,
    .faq-login-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Base .welcome-modern-pricing-layout uses !important + 2 cols with
     minmax(340px, 440px). Without !important here the card never stacks on
     phones (~390px) and overlaps the intro copy. Match base specificity. */
  html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
  }
  html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-main-card,
  html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-layout > .pricing-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-visual {
    display: none !important;
  }
  html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-copy {
    width: 100% !important;
    max-width: none !important;
  }
  html body.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero, .pricing-modern-hero,
    .tracking-login-hero) :is(h1, .faq-modern-title, .login-page__title) { max-width: 20ch; }
  html body.nedate-ui-standard .welcome-modern-parcel-visual { display: none; }
  html body.nedate-ui-standard .welcome-modern-how-copy { align-items: flex-start; }
}

/* --- ≤ 768px: mobile ---------------------------------------------------
   The navbar collapses to brand + burger; everything that was a row becomes
   a stack; every tap target clears 44px. */
@media (max-width: 768px) {
  :root { --sw-nav-height: 62px; }

  html body.nedate-ui-standard .navbar-azure .navbar-brand img { max-width: 128px !important; max-height: 26px !important; }
  html body.nedate-ui-standard .navbar-azure .nav-link-glass { padding: .5rem .6rem !important; font-size: var(--sw-text-xs); }
  /* Keep only the burger, theme toggle and the primary CTA in the bar */
  html body.nedate-ui-standard .navbar-azure .btn-auth-glass:not(:last-child) { display: none !important; }
  html body.nedate-ui-standard .navbar-azure .btn-auth-glass:last-child { padding: .45rem .85rem !important; font-size: var(--sw-text-xs); }
  html body.nedate-ui-standard .navbar-azure :is(.btn-icon-glass, .btn-user-glass, .navbar-toggler) { width: 38px; height: 38px; min-width: 38px; }
  html body.nedate-ui-standard .navbar-azure > .container-fluid { gap: .4rem; }

  /* Hero */
  html body.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero, .pricing-modern-hero,
    .tracking-login-hero) :is(h1, .faq-modern-title, .login-page__title) {
    max-width: none;
    font-size: clamp(1.95rem, 1.3rem + 3.4vw, 2.5rem) !important;
    line-height: 1.12 !important;
  }
  html body.nedate-public-standard :is(.faq-modern-actions, .welcome-modern-hero-actions) { width: 100%; }
  html body.nedate-public-standard :is(.faq-modern-actions, .welcome-modern-hero-actions) > a { flex: 1 1 100%; }
  /* Sul telefono le tre garanzie vanno a capo e restavano appese a sinistra,
     sotto due pulsanti larghi quanto lo schermo: una colonna storta. Centrate,
     ogni riga sta in mezzo, anche quando ne resta una sola. */
  html body.nedate-public-standard .welcome-modern-trust-row {
    gap: .5rem 1rem;
    justify-content: center;
    text-align: center;
  }

  /* Tool card: full-bleed feel, comfortable padding */
  html body.nedate-ui-standard :is(.tool-card, .welcome-modern-hero-tool-card) { border-radius: var(--sw-radius-lg) !important; }
  html body.nedate-ui-standard .welcome-modern-hero-tool-card .p-4,
  html body.nedate-ui-standard .welcome-modern-hero-tool-card .p-md-5 { padding: 1.125rem !important; }
  html body.nedate-ui-standard .tool-tab { min-height: 48px; font-size: var(--sw-text-xs); padding: .75rem .5rem; }
  html body.nedate-ui-standard .type-selector { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }

  /* Grids collapse */
  html body.nedate-ui-standard :is(.welcome-modern-steps, .welcome-modern-timeline,
    .tracking-login-journey, .welcome-modern-faq-grid) {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  html body.nedate-ui-standard .welcome-modern-steps > * { display: flex; gap: .875rem; align-items: flex-start; text-align: left; }
  html body.nedate-ui-standard .welcome-modern-timeline { gap: .75rem; }

  html body.nedate-ui-standard :is(.feature-card, .landing-feature-card) { padding: 1.125rem; }

  /* CTA banner stacks */
  html body.nedate-ui-standard .welcome-modern-cta-grid,
  html body.nedate-ui-standard .landing-cta-banner > .container > * {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.5rem;
  }
  html body.nedate-ui-standard .welcome-modern-cta-actions { width: 100%; }
  html body.nedate-ui-standard .welcome-modern-cta-actions > * { flex: 1 1 100%; }

  /* Pricing */
  html body.nedate-ui-standard .pricing-modern-card { padding: 1.25rem; }
  html body.nedate-ui-standard :is(.type-selector, .pricing-modern-billing) { width: 100%; }
  html body.nedate-ui-standard :is(.type-btn, .pricing-modern-billing-btn) { flex: 1; }

  /* Footer */
  html body.nedate-ui-standard .nedate-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  html body.nedate-ui-standard :is(.nedate-footer-brand, .nedate-footer-newsletter) { grid-column: 1 / -1; }
  html body.nedate-ui-standard .nedate-footer-bottom { flex-direction: column; align-items: flex-start; gap: .875rem; }

  /* Tables scroll rather than squash */
  html body.nedate-ui-standard .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Chat launcher shrinks so it stops covering the CTA */
  html body.nedate-ui-standard .nedate-chat-launcher { width: 48px; height: 48px; font-size: 1.15rem; }
  html body.nedate-ui-standard .nedate-live-chat-widget { right: .75rem; bottom: .75rem; }
}

/* --- ≤ 576px ------------------------------------------------------------ */
@media (max-width: 576px) {
  html body.nedate-ui-standard .welcome-modern-hero-tool-card .row.g-3 > [class*="col-"] { width: 100%; flex: 0 0 100%; }
  html body.nedate-ui-standard .nedate-footer-grid { grid-template-columns: minmax(0, 1fr); }
  html body.nedate-ui-standard :is(.type-btn, .pricing-modern-billing-btn) { padding: .5rem .5rem !important; font-size: var(--sw-text-xs); }
  html body.nedate-ui-standard .tool-tab span { display: inline; }
  html body.nedate-ui-standard .welcome-modern-faq-strip .welcome-modern-faq-grid { gap: .75rem; }
}

/* --- Coarse pointers: never ship a sub-44px target -------------------- */
@media (pointer: coarse) {
  html body.nedate-ui-standard :is(.btn, .nav-link-glass, .dropdown-item, .tool-tab, .type-btn,
    .pricing-modern-billing-btn, .accordion-button, .nedate-footer-column a) {
    min-height: 44px;
  }
  html body.nedate-ui-standard .nedate-footer-column a { display: inline-flex; align-items: center; }
}

/* --- Motion -------------------------------------------------------------
   The scroll reveal starts at opacity 0 and waits for JS to add .is-inview.
   If the observer never runs — script error, very old browser — the section
   would stay invisible forever. This failsafe reveals it after 3s without
   touching the animation when JS does its job. */
@keyframes sw-inview-failsafe { to { opacity: 1; transform: none; } }
html body.nedate-ui-standard .landing-inview:not(.is-inview) {
  animation: sw-inview-failsafe 0s linear 3s forwards;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html body.nedate-ui-standard *,
  html body.nedate-ui-standard *::before,
  html body.nedate-ui-standard *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html body.nedate-ui-standard :is(.landing-enter, .landing-inview) { opacity: 1 !important; transform: none !important; }
  html body.nedate-ui-standard .wm-marquee-track { animation: none !important; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  html body.nedate-ui-standard {
    color: #000;
    background: #fff;
  }
  html body.nedate-ui-standard :is(.navbar, .nedate-site-footer, .nedate-live-chat-widget,
    .faq-modern-back-top, .skip-link, .welcome-modern-cta, .landing-cta-banner) { display: none !important; }
  html body.nedate-ui-standard :is(.card, .pricing-modern-card, .tool-card) {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  html body.nedate-ui-standard a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}


/* =========================================================================
   15 · LATE CORRECTIONS
   Found by rendering the pages and measuring, not by reading the CSS.
   ========================================================================= */

/* The /pricing closing CTA was a pale pink panel with navy text, while the
   home page closes on a navy band. Section 03 lists it among the dark
   surfaces, so its copy had already flipped to light ink — the panel is
   brought in line rather than the ink flipped back, so both pages close the
   same way. */
html body.nedate-ui-standard.nedate-public-standard .pricing-modern-cta {
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) !important;
  background:
    radial-gradient(620px 300px at 85% 10%, rgba(240, 70, 81, .16), transparent 70%),
    linear-gradient(140deg, var(--sw-navy-950), var(--sw-navy-800)) !important;
  border-radius: var(--sw-radius-xl) !important;
  box-shadow: var(--sw-shadow-lg) !important;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-modern-cta :is(h2, h3) {
  color: var(--sw-on-dark) !important;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-modern-cta > p {
  color: var(--sw-on-dark-body) !important;
}
html body.nedate-ui-standard.nedate-public-standard .pricing-modern-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

/* "Ricerche frequenti" sat at 3.9:1 — the label before the tag list. */
html body.nedate-ui-standard[class][class] :is(.faq-login-preview-head, .faq-redesign-hint,
  .faq-modern-panel-card) > span:first-child {
  color: var(--sw-muted) !important;
}

/* Support-row subtitle: .85 alpha on brand red measured 3.9:1. */
html body.nedate-ui-standard[class][class][class] .faq-login-support :is(small, .small) {
  color: var(--sw-on-brand) !important;
}

/* a11y.css keeps the pre-redesign primary (#f53324) for its link colour, which
   is 3.7:1 on the register page's tinted panel. */
html body.nedate-ui-standard[class][class] .login-page__link {
  color: var(--sw-brand-700) !important;
}

/* The tag-list label above the frequent searches measured 3.9:1. */
html body.nedate-ui-standard[class][class] :is(.faq-redesign-popular, .faq-login-popular) > span:first-child {
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs) !important;
  font-weight: var(--sw-weight-medium) !important;
}

/* The login page's decorative "app window" mock: its title bar lost its fill
   when theme-arancio.css was retired, leaving near-white text on white. */
html body.nedate-ui-standard[class][class] .login-refresh-preview__window {
  overflow: hidden;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-lg) !important;
  box-shadow: var(--sw-shadow-md) !important;
}
html body.nedate-ui-standard[class][class] .login-refresh-preview__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .875rem !important;
  /* Era riempita di --sw-surface-2: un rettangolo dentro il rettangolo della
     card, la stessa cosa che abbiamo tolto da /tracking. Resta solo il filo. */
  background: transparent !important;
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard[class][class] .login-refresh-preview__bar > span {
  margin-left: .5rem;
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs) !important;
  font-weight: var(--sw-weight-medium) !important;
}
html body.nedate-ui-standard[class][class] .login-refresh-preview__bar > i {
  width: 9px;
  height: 9px;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-line-strong) !important;
}

/* --- Dark mode corrections ---------------------------------------------
   Caught by rendering the page with theme_pref=dark rather than by reading
   the cascade. */

/* The hero's primary CTA is an <a>, so in dark mode it was picking up the
   link colour — brand on brand, i.e. invisible. */
html[data-theme="dark"] body.nedate-ui-standard[class][class] :is(.welcome-modern-action-primary,
  .faq-modern-action-card.welcome-modern-action-primary, .landing-cta-btn,
  .pricing-modern-plan-btn, .pricing-login-primary, .welcome-modern-plan-button,
  .btn-primary, .btn-primary-custom),
html body.nedate-ui-standard.dark-mode[class][class] :is(.welcome-modern-action-primary,
  .faq-modern-action-card.welcome-modern-action-primary, .landing-cta-btn,
  .pricing-modern-plan-btn, .pricing-login-primary, .welcome-modern-plan-button,
  .btn-primary, .btn-primary-custom) {
  color: var(--sw-navy-950) !important;
  background: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
}

/* Courier marks are dark-on-transparent PNGs, so on a dark canvas they
   disappear. Inverted and dimmed, they read as a quiet row again. */
html[data-theme="dark"] body.nedate-ui-standard .wm-courier-banner,
html body.nedate-ui-standard.dark-mode .wm-courier-banner {
  filter: grayscale(1) invert(1) brightness(1.6) !important;
  opacity: .5;
}
html[data-theme="dark"] body.nedate-ui-standard .wm-courier-banner:hover,
html body.nedate-ui-standard.dark-mode .wm-courier-banner:hover {
  filter: grayscale(1) invert(1) brightness(1.9) !important;
  opacity: .85;
}

/* La linguetta scelta tiene la forma che ha in chiaro: la riga rossa sotto e
   basta. Qui c'era `var(--sw-surface)`, cioe' un riempimento — piu' chiaro
   della scheda che lo contiene — e al buio si vedeva come un rettangolo
   acceso dietro «Preventivo». In chiaro la stessa linguetta e' trasparente. */
html[data-theme="dark"] body.nedate-ui-standard.nedate-public-standard .welcome-modern-page .welcome-modern-hero-tool-card .tool-tab.active,
html body.nedate-ui-standard.nedate-public-standard.dark-mode .welcome-modern-page .welcome-modern-hero-tool-card .tool-tab.active {
  color: var(--sw-brand-600) !important;
  background: transparent !important;
  background-image: none !important;
  border-bottom-color: var(--sw-brand-600) !important;
}

/* nedate-design-system.css recolours every <a> in dark mode via
   `a:not([class*="btn"]):not(.skip-link)` — and the hero CTA is an <a> whose
   classes contain no "btn", so it was painted the link accent on top of its
   own brand fill. Targeted here by element+class rather than through :is(),
   which keeps the specificity unambiguous. */
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] a.welcome-modern-action-primary,
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] a.pricing-modern-plan-btn,
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] a.pricing-login-primary,
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] a.welcome-modern-plan-button,
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] a.landing-cta-btn,
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] a.pricing-modern-cta-btn,
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] a.faq-login-support,
html body.nedate-ui-standard.dark-mode[class][class][class][class] a.welcome-modern-action-primary,
html body.nedate-ui-standard.dark-mode[class][class][class][class] a.pricing-modern-plan-btn,
html body.nedate-ui-standard.dark-mode[class][class][class][class] a.pricing-login-primary,
html body.nedate-ui-standard.dark-mode[class][class][class][class] a.welcome-modern-plan-button,
html body.nedate-ui-standard.dark-mode[class][class][class][class] a.landing-cta-btn,
html body.nedate-ui-standard.dark-mode[class][class][class][class] a.pricing-modern-cta-btn,
html body.nedate-ui-standard.dark-mode[class][class][class][class] a.faq-login-support {
  color: var(--sw-navy-950) !important;
  -webkit-text-fill-color: var(--sw-navy-950) !important;
}
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] a.welcome-modern-action-primary :is(span, i, strong, small),
html body.nedate-ui-standard.dark-mode[class][class][class][class] a.welcome-modern-action-primary :is(span, i, strong, small) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
/* the secondary action stays readable too */
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] a.welcome-modern-action-secondary,
html body.nedate-ui-standard.dark-mode[class][class][class][class] a.welcome-modern-action-secondary {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  background: var(--sw-surface-2) !important;
  border-color: var(--sw-line-strong) !important;
}


/* =========================================================================
   16 · ACCESSIBILITY FIXES — WCAG 2.1 AA
   Each entry below was measured in the browser, not inferred from the CSS.
   ========================================================================= */

:root {
  /* 1.4.11 requires the visual boundary of a control to clear 3:1 against its
     surroundings. The old field border was rgba(20,39,74,.14) — 1.31:1, i.e.
     effectively invisible. This value clears 3:1 on white AND on the canvas.
     Cards and dividers keep the lighter --sw-line: decorative rules are not
     "UI components" and are exempt. */
  --sw-field-border: #7690b2;
}
html[data-theme="dark"],
html body.dark-mode {
  --sw-field-border: #496996;   /* 3.11:1 sulla superficie scura */
}


/* --- 2.4.7 the skip link's focus ring was white on white ---------------- */
html body.nedate-ui-standard .skip-link:focus,
html body.nedate-ui-standard .skip-link:focus-visible {
  outline: 3px solid var(--sw-navy-950) !important;
  outline-offset: 2px !important;
}

/* --- 2.4.7 the converted tabs are real buttons now, so make sure the ring
       is not clipped by the tab strip's overflow ------------------------- */
html body.nedate-ui-standard .tool-tabs { overflow: visible; }
html body.nedate-ui-standard .tool-tab:focus-visible {
  outline: 2px solid var(--sw-brand-600) !important;
  outline-offset: -3px !important;
}

/* --- 2.5.8 (WCAG 2.2 AA) minimum 24×24 target -------------------------- */
html body.nedate-ui-standard .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .15rem;
}
/* the checkbox's hit area is enlarged through its label rather than by
   drawing a bigger box, so the control keeps its proportions */
html body.nedate-ui-standard .form-check {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 24px;
  padding-left: 0;
}
html body.nedate-ui-standard .form-check .form-check-input { margin-left: 0; float: none; flex: 0 0 auto; }
html body.nedate-ui-standard .form-check .form-check-label { padding-block: .25rem; }

/* Small standalone links and chips that measured under 24px tall */
html body.nedate-ui-standard :is(.nedate-footer-logo, .faq-redesign-tag, .faq-login-tag) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --- 1.4.4 nothing below 11px -------------------------------------------
   Several labels and meta lines computed to 9.6–10.6px, which is below the
   floor where Plex Sans stays legible at arm's length. */
html body.nedate-ui-standard :is(small, .small, .x-small, label, .form-label, .log-label,
  .pricing-modern-price-meta, .pricing-modern-setup, .welcome-modern-plan-note,
  .tracking-login-helper, .nedate-footer-bottom, .welcome-modern-steps span) {
  font-size: max(0.6875rem, 11px);
}
html body.nedate-ui-standard :is(.welcome-modern-section-kicker, .faq-modern-eyebrow,
  .contact-modern-eyebrow, .eyebrow, .nedate-page-eyebrow) {
  font-size: max(0.6875rem, 11px) !important;
}

/* --- 2.5.8 the two targets that are not inline-text exempt ---------------
   Inline links inside a sentence are exempt by the "Inline" exception; a
   checkbox and a filter chip are not. */
html body.nedate-ui-standard[class][class] input.form-check-input,
html body.nedate-ui-standard[class][class] input[type="checkbox"].form-check-input,
html body.nedate-ui-standard[class][class] input[type="radio"].form-check-input {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
}
/* the remaining 4px come from the label's padding, so the whole row is the
   target rather than just the 20px box */
html body.nedate-ui-standard[class][class] .form-check {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: .55rem;
}
html body.nedate-ui-standard[class][class] .form-check .form-check-label {
  padding-block: .3rem;
  cursor: pointer;
}
html body.nedate-ui-standard[class][class] :is(.faq-redesign-tag, .faq-login-tag,
  .faq-redesign-popular button, .faq-login-popular button) {
  min-height: 28px !important;
  padding-inline: .7rem !important;
  display: inline-flex !important;
  align-items: center;
}

/* =========================================================================
   17 · VISUAL PASS — misurato a schermo, sezione per sezione
   ========================================================================= */

/* The closing CTA section is inset by the app shell, so painting it with the
   canvas colour drew a visible grey slab behind the navy banner. The section
   carries no surface of its own: only the banner inside it does. */
html body.nedate-ui-standard.nedate-public-standard :is(.welcome-modern-cta, .landing-cta-banner) {
  background: transparent !important;
}

/* Hero measure: the left column is 586px but the headline was capped at 16ch
   (480px) and the lead at 52ch (416px), which left a ragged 170px of dead
   space. Widened just enough to use the column without the line getting long
   enough to hurt reading. */
html body.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero, .pricing-modern-hero,
  .tracking-login-hero) :is(h1, .faq-modern-title, .login-page__title) {
  max-width: 19ch;
}
html body.nedate-public-standard :is(.welcome-modern-hero, .faq-modern-hero, .pricing-modern-hero,
  .tracking-login-hero) :is(.pricing-modern-subtitle, .login-page__lead, .lead) {
  max-width: 58ch;
}

/* The accent line carried .18em of inherited top padding, which opened a gap
   between it and the line above it. */
html body.nedate-public-standard :is(.welcome-modern-title-accent, .pricing-modern-title-accent,
  .contact-modern-title-line) {
  padding-block: 0 !important;
  margin-top: .04em !important;
}

/* The courier strip sits in its own white card; the section around it does not
   need a second surface and a border on top of that. */
html body.nedate-ui-standard .welcome-modern-strip,
html body.nedate-ui-standard .welcome-modern-logo-strip {
  background: transparent !important;
  border-block: 0 !important;
}

/* The logo strip already carries its own vertical padding, so the section that
   follows it does not need a full section rhythm on top: the two stacked
   paddings left a 140px hole between the strip and the first heading. */
html body.nedate-ui-standard :is(.welcome-modern-strip, .welcome-modern-logo-strip)
  + :is(.welcome-modern-body-section, section) {
  padding-top: clamp(2rem, 1.25rem + 2.5vw, 3.25rem) !important;
}
html body.nedate-ui-standard :is(.welcome-modern-strip, .welcome-modern-logo-strip) {
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem) !important;
}

/* The sample shipment in the tracking preview is delivered, so every step is
   complete: the last dot was brand red, which reads as an alert next to the
   word "Consegnato". All four stay green. */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-timeline i:last-child::before {
  background: var(--sw-success) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-success) 15%, transparent) !important;
}

/* The tick glyph was 10.5px inside a 22px disc, so the circles read as empty. */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-pricing-points i {
  width: 24px;
  height: 24px;
  font-size: .8125rem;
  font-weight: 700;
}

/* The icon defined the height of the first grid row, so the title floated in
   the middle of it and left a gap before the paragraph. The icon now spans
   both rows and the text block closes up beside it. */
html body.nedate-ui-standard :is(.feature-card, .landing-feature-card) {
  grid-template-rows: auto 1fr;
  row-gap: .3rem;
  align-content: start;
}
html body.nedate-ui-standard :is(.feature-card, .landing-feature-card) > .feature-icon {
  grid-row: 1 / span 2 !important;
  align-self: start;
}
html body.nedate-ui-standard :is(.feature-card, .landing-feature-card) > :is(h3, h4, h5, strong) {
  align-self: start;
  padding-top: .55rem;   /* optical alignment with the icon's centre */
}

/* "What happens next" list on the contact page — fills the copy column, which
   used to end two thirds of the way up beside a much taller form. */
html body.nedate-ui-standard .contact-modern-next {
  counter-reset: cnext;
  display: grid;
  gap: .875rem;
  margin: 1.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--sw-line);
  list-style: none;
}
html body.nedate-ui-standard .contact-modern-next li {
  position: relative;
  padding-left: 2.25rem;
  min-height: 24px;
}
html body.nedate-ui-standard .contact-modern-next li::before {
  counter-increment: cnext;
  content: counter(cnext);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--sw-brand-700);
  background: var(--sw-brand-50);
  border: 1px solid var(--sw-brand-100);
  border-radius: var(--sw-radius-pill);
  font-size: .75rem;
  font-weight: var(--sw-weight-semi);
  font-variant-numeric: tabular-nums;
}
html body.nedate-ui-standard .contact-modern-next strong {
  display: block;
  color: var(--sw-ink);
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-weight-semi);
}
html body.nedate-ui-standard .contact-modern-next span {
  color: var(--sw-muted);
  font-size: var(--sw-text-xs);
  line-height: 1.55;
}

/* The benefit list on login/register was laid out three-across inside a 420px
   column, so each card got ~130px and the copy broke one or two words per
   line ("Configurazione" overflowed its card entirely). It is a list: one
   item per row. */
html body.nedate-ui-standard[class][class] :is(.login-page__features, .register-page__features) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .75rem !important;
  margin: 1.5rem 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
html body.nedate-ui-standard[class][class] :is(.login-page__features, .register-page__features) > li {
  display: flex !important;
  align-items: flex-start !important;
  gap: .75rem !important;
  min-width: 0;
  padding: .875rem 1rem !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-md) !important;
  box-shadow: var(--sw-shadow-xs) !important;
}
html body.nedate-ui-standard[class][class] :is(.login-page__features, .register-page__features) > li > div {
  min-width: 0;
}
html body.nedate-ui-standard[class][class] :is(.login-page__features, .register-page__features) strong {
  display: block;
  color: var(--sw-ink) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard[class][class] :is(.login-page__features, .register-page__features) span:not(.login-page__feat-icon) {
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs) !important;
  line-height: 1.55;
}
html body.nedate-ui-standard[class][class] .login-page__feat-icon {
  flex: 0 0 auto;
  width: 36px !important;
  height: 36px !important;
}

/* A 390px un'etichetta come «CONFERMA PASSWORD» toccava il bordo destro del
   campo e veniva tagliata: la si rimpicciolisce un poco nello stato salito.
   Vale SOLO per le pagine di accesso, che usano il motivo di Bootstrap.
   Prima era legata alla sola `body.nedate-ui-standard`, quindi prendeva anche
   /spedizioni — dove l'etichetta deve stare ferma — e sotto i 480px l'effetto
   tornava vivo. E' il motivo per cui non lo vedevo a 1280: la regola e' in
   una media query che a quella larghezza non si attiva. */
@media (max-width: 480px) {
  html body.nedate-ui-standard.nedate-auth-standard .form-floating > .form-control:focus ~ label,
  html body.nedate-ui-standard.nedate-auth-standard .form-floating > .form-control:not(:placeholder-shown) ~ label,
  html body.nedate-ui-standard.nedate-auth-standard .form-floating > .form-select ~ label,
  html body.nedate-ui-standard.nedate-auth-standard .form-floating > label {
    max-width: calc(100% - 1rem);
    font-size: .8125rem;
  }
  html body.nedate-ui-standard.nedate-auth-standard .form-floating > .form-control:focus ~ label,
  html body.nedate-ui-standard.nedate-auth-standard .form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(.78) translateY(-.5rem) translateX(.12rem);
  }
}

/* =========================================================================
   18 · "Spedire in tre passaggi"
   -------------------------------------------------------------------------
   The markup stacks four things per step — a numbered disc, an icon, a label
   and a description — so each column read as two rows of circles, and the
   connector (drawn at top:28px) crossed the numbers instead of linking the
   icons. The number and the icon say the same thing twice.

   The steps also sit in the left half of a two-column section, which gave
   each of the three columns about 187px — too narrow for its sentence, so
   every description broke across two ragged lines. They are now a vertical
   list at every width: each step gets the full column, the icon carries the
   numeral as a corner badge, and the rail runs down through the icons.
   ========================================================================= */

html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1.35rem !important;
  margin-top: 1.75rem !important;
  align-items: start;
  text-align: left;
  counter-reset: step;
}

/* The rail runs the full height of the list rather than stopping at the first
   and last icon: the gradient fades to nothing at both ends, so the track
   reads as continuing past the steps instead of being cut off square. */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 27px !important;
  right: auto !important;
  width: 2px !important;
  height: auto !important;
  z-index: 0 !important;
  background: linear-gradient(180deg,
      rgba(240, 70, 81, 0) 0%,
      rgba(240, 70, 81, .45) 14%,
      rgba(240, 70, 81, .55) 50%,
      rgba(240, 70, 81, .45) 86%,
      rgba(240, 70, 81, 0) 100%) !important;
}

html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps > div {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  grid-template-rows: auto auto;
  justify-items: start;
  align-items: start;
  column-gap: 1rem !important;
  row-gap: .15rem !important;
  min-width: 0;
  padding: 0 !important;
}

/* the icon carries the step: 56px, filled, sitting on the rail */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps > div > i {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  place-items: center;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  color: var(--sw-brand-300) !important;
  background: var(--sw-navy-850) !important;
  border: 1px solid rgba(240, 70, 81, .32) !important;
  border-radius: var(--sw-radius-pill) !important;
  font-size: 1.35rem !important;
  /* No masking ring here: the disc is opaque, so it already interrupts the
     rail. The ring only ate the few pixels of line left between two steps. */
  box-shadow: none;
}

/* the numeral rides the icon's top-right corner instead of owning a row */
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps > div::before {
  counter-increment: step;
  content: counter(step) !important;
  position: absolute !important;
  top: -3px !important;
  left: 39px !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border: 2px solid var(--sw-navy-900) !important;
  border-radius: var(--sw-radius-pill) !important;
  box-shadow: none !important;
  font-family: var(--sw-font-body) !important;
  font-size: .6875rem !important;
  font-weight: var(--sw-weight-semi) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
  z-index: 2;
}

html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block;
  margin: .5rem 0 0 !important;
  color: var(--sw-on-dark) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-semi) !important;
}
html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps span {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block;
  max-width: 46ch;
  margin: 0 !important;
  color: var(--sw-on-dark-muted) !important;
  font-size: var(--sw-text-xs) !important;
  line-height: 1.55;
}

@media (max-width: 768px) {
  html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps { gap: 1rem !important; }
  html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps > div { column-gap: .875rem !important; }
  html body.nedate-ui-standard.nedate-public-standard .welcome-modern-steps > div > i { box-shadow: none; }
}

/* =========================================================================
   19 · FULL-BLEED BANDS
   The page shell carried a fixed 35px side gutter, so a section with its own
   background — the dark "how it works" band, the closing CTA — stopped short
   of both edges and read as an inset panel rather than a band across the
   page. The shell gutter goes to zero and the inner containers keep supplying
   the reading margin, so content stays exactly where it was.
   ========================================================================= */
/* Zeroing the shell gutter was the wrong lever: on /pricing the hero copy is
   not inside a max-width container, so it went straight to the viewport edge.
   The gutter stays; only the bands that paint their own background pull back
   out of it, by exactly the token's width. */
html body.nedate-ui-standard.nedate-public-standard {
  --sw-shell-gutter: 35px;
}
html body.nedate-ui-standard.nedate-public-standard :is(.welcome-modern-how-section,
  .welcome-modern-strip, .welcome-modern-faq-strip, .welcome-modern-cta,
  .welcome-modern-channels,
  .landing-cta-banner, .pricing-modern-cta-section) {
  margin-inline: calc(-1 * var(--sw-shell-gutter)) !important;
  width: auto !important;
  max-width: none !important;
}
/* No padding compensation needed inside: the container is max-width and
   centred, so widening the band by 2×35px simply moves its own margins, and
   the content lands on the same x as every other section. */

/* Below 992px the shell has no side gutter of its own (restyling-fixes.css
   zeroes it), so pulling the bands out by 35px made them overhang the
   viewport by that much on each side. The token follows the shell. */
@media (max-width: 959.98px) {
  /* with #app3d's padding gone there is no shell gutter left to escape */
  html body.nedate-ui-standard.nedate-public-standard { --sw-shell-gutter: 0px; }
}

/* #app3d still carries a 5px side padding — the last survivor of the retired
   "5px mobile gutter" campaign. With the reading margin now coming from the
   inner containers it only stops the full-bleed bands from reaching the edge,
   and it makes `main.w-100` compute 10px wider than its own content box. */
html body.nedate-ui-standard.nedate-public-standard #app3d {
  padding-inline: 0 !important;
}


/* =========================================================================
   20 · FOOTER — redesign
   -------------------------------------------------------------------------
   Desktop: the logo rendered at navbar size and dominated the block, and the
   five payment marks broke 4 + 1 across two rows as white stickers.
   Mobile: the logo filled the full 362px column and was clipped at the top,
   and the four link groups stacked one under another, making the footer
   1300px tall — longer than most of the pages above it.
   ========================================================================= */

html body.nedate-ui-standard .nedate-site-footer {
  padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  color: var(--sw-on-dark-body);
  background: var(--sw-navy-950) !important;
}

/* --- Grid -------------------------------------------------------------- */
html body.nedate-ui-standard[class][class] .nedate-footer-grid {
  display: grid !important;
  grid-template-columns:
    minmax(200px, 1.5fr)
    repeat(4, minmax(110px, 1fr))
    minmax(210px, 1.3fr) !important;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.75rem) !important;
  padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) !important;
}

/* --- Brand ------------------------------------------------------------- */
html body.nedate-ui-standard[class][class] .nedate-footer-logo {
  display: inline-flex !important;
  align-items: center;
  max-width: 168px;
}
html body.nedate-ui-standard[class][class] .nedate-footer-logo-img {
  display: block;
  width: auto !important;
  max-width: 168px !important;
  height: auto !important;
  max-height: 30px !important;
  object-fit: contain;
}
html body.nedate-ui-standard[class][class] .nedate-footer-brand p {
  margin-top: .875rem !important;
  max-width: 32ch;
  color: var(--sw-on-dark-muted) !important;
  font-size: var(--sw-text-sm);
  line-height: 1.6;
}

/* --- Column headings and links ----------------------------------------- */
html body.nedate-ui-standard[class][class] :is(.nedate-footer-column, .nedate-footer-newsletter)
  :is(h6, h2, .nedate-footer-heading) {
  margin: 0 0 .875rem !important;
  color: var(--sw-on-dark) !important;
  font-family: var(--sw-font-body) !important;
  font-size: .6875rem !important;
  font-weight: var(--sw-weight-semi) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  line-height: 1.3;
}
html body.nedate-ui-standard[class][class] .nedate-footer-column {
  display: grid !important;
  gap: .55rem !important;
  align-content: start;
  min-width: 0;
}
html body.nedate-ui-standard[class][class] .nedate-footer-column a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  width: fit-content;
  color: var(--sw-on-dark-body) !important;
  font-size: var(--sw-text-sm);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard[class][class] .nedate-footer-column a:hover {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: .22em;
}

/* --- Newsletter -------------------------------------------------------- */
html body.nedate-ui-standard[class][class] .nedate-footer-newsletter p {
  margin-bottom: .75rem !important;
  color: var(--sw-on-dark-muted) !important;
  font-size: var(--sw-text-sm);
}
html body.nedate-ui-standard[class][class] .nedate-footer-newsletter-form {
  display: flex !important;
  gap: .5rem;
  align-items: stretch;
  max-width: 320px;
}

/* --- Payment marks -----------------------------------------------------
   They were 26px tall on opaque white pills, which turned five card logos
   into five bright stickers on a dark footer and pushed the fifth onto its
   own row. Smaller, on a translucent plate, they read as one quiet strip. */
html body.nedate-ui-standard[class][class] .nedate-footer-payments {
  margin-top: 1.25rem !important;
}
html body.nedate-ui-standard[class][class] .nedate-footer-payments > div {
  display: flex !important;
  flex-wrap: wrap;
  gap: .375rem !important;
  align-items: center;
}
html body.nedate-ui-standard[class][class] .nedate-footer-payments img {
  width: auto !important;
  height: 20px !important;
  padding: .25rem .3rem !important;
  background: rgba(255, 255, 255, .90) !important;
  border-radius: 4px !important;
  opacity: .72;
  transition: opacity var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard[class][class] .nedate-footer-payments img:hover { opacity: 1; }

/* --- Bottom bar -------------------------------------------------------- */
html body.nedate-ui-standard[class][class] .nedate-footer-bottom {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.125rem !important;
  border-top: 1px solid rgba(255, 255, 255, .09) !important;
  color: var(--sw-on-dark-muted) !important;
  font-size: var(--sw-text-xs);
}

/* =========================================================================
   Mobile footer: two columns of link groups instead of one long stack.
   Four groups of five links in a single column ran to 1300px; paired up they
   fit in roughly half that, and the groups still read as groups.
   ========================================================================= */
@media (max-width: 768px) {
  html body.nedate-ui-standard[class][class] .nedate-site-footer {
    padding-top: 2.25rem;
  }
  html body.nedate-ui-standard[class][class] .nedate-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.75rem 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }
  html body.nedate-ui-standard[class][class] :is(.nedate-footer-brand, .nedate-footer-newsletter) {
    grid-column: 1 / -1 !important;
  }
  html body.nedate-ui-standard[class][class] .nedate-footer-logo,
  html body.nedate-ui-standard[class][class] .nedate-footer-logo-img {
    max-width: 148px !important;
    max-height: 28px !important;
  }
  html body.nedate-ui-standard[class][class] .nedate-footer-brand p {
    max-width: none;
    font-size: var(--sw-text-xs);
  }
  html body.nedate-ui-standard[class][class] .nedate-footer-column { gap: .45rem !important; }
  html body.nedate-ui-standard[class][class] .nedate-footer-column a { font-size: var(--sw-text-xs); }
  html body.nedate-ui-standard[class][class] .nedate-footer-newsletter-form { max-width: none; }
  html body.nedate-ui-standard[class][class] .nedate-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .875rem;
  }
}

/* Below 380px two columns of link text start to break words, so the groups
   go back to one column — but the brand block keeps its cap. */
@media (max-width: 360px) {
  html body.nedate-ui-standard[class][class] .nedate-footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* =========================================================================
   21 · PLANS — redesign
   -------------------------------------------------------------------------
   With a single plan configured the card rendered as a 423×682 strip marooned
   in the middle of a 1440px page, and its twelve feature rows carried equal
   weight — seven of which said "not included". A plan card that leads with
   what you don't get reads as a list of refusals.
   ========================================================================= */

/* A lone plan gets a card wide enough to breathe; three plans keep the
   three-across comparison they were designed for. */
html body.nedate-ui-standard[class][class] .pricing-login-plan-column:only-child {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 760px !important;
}
html body.nedate-ui-standard[class][class] .pricing-login-plan-column:only-child .pricing-modern-card {
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) !important;
}
/* …and its features split into two columns instead of one long ladder */
html body.nedate-ui-standard[class][class] .pricing-login-plan-column:only-child .pricing-modern-features {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 2rem !important;
  row-gap: .625rem !important;
  margin-bottom: 1.75rem !important;
}

/* --- Included vs not included -------------------------------------------
   Only the <i> carried the yes/no class, so the row could not be styled from
   it before :has(). What is included stays at full strength; what is not
   steps back instead of shouting in the same voice. */
html body.nedate-ui-standard[class][class] .pricing-modern-feature:has(.pricing-modern-feature-no) span {
  color: var(--sw-muted) !important;
  font-weight: var(--sw-weight-normal) !important;
}
html body.nedate-ui-standard[class][class] .pricing-modern-feature:has(.pricing-modern-feature-no) {
  opacity: .78;
}
html body.nedate-ui-standard[class][class] .pricing-modern-feature-no {
  color: var(--sw-faint) !important;
}
html body.nedate-ui-standard[class][class] .pricing-modern-feature:has(.pricing-modern-feature-yes) span {
  color: var(--sw-ink) !important;
  font-weight: var(--sw-weight-medium) !important;
}

/* --- Price -------------------------------------------------------------
   It was brand red here and ink on the home page. Red on a number reads as a
   markdown or an alert; the two pages now show the same figure the same way. */
html body.nedate-ui-standard[class][class] :is(.pricing-modern-price-val, .price-val) {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}

html body.nedate-ui-standard[class][class] .pricing-modern-plan-name {
  margin-bottom: .25rem !important;
  font-size: var(--sw-text-h3) !important;
}
html body.nedate-ui-standard[class][class] .pricing-modern-price-block { margin-bottom: 1.5rem !important; }
html body.nedate-ui-standard[class][class] .pricing-modern-price-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .875rem;
  margin-top: .5rem;
}
html body.nedate-ui-standard[class][class] .pricing-modern-trial {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--sw-success) !important;
  font-weight: var(--sw-weight-medium);
}

@media (max-width: 768px) {
  /* one column again: two columns of feature text break words at 390px */
  html body.nedate-ui-standard[class][class] .pricing-login-plan-column:only-child .pricing-modern-features {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.nedate-ui-standard[class][class] .pricing-login-plan-column:only-child .pricing-modern-card {
    padding: 1.375rem !important;
  }
}

/* h-100 stretches the lone card to the row height, which left ~65px of empty
   card below the CTA. With no sibling to match, it sizes to its content. */
html body.nedate-ui-standard[class][class] .pricing-login-plan-column:only-child .pricing-modern-card.h-100 {
  height: auto !important;
}

/* The plan description is admin-editable content. It reads as a subtitle to
   the name, so it is set as one rather than left as a grey echo. */
html body.nedate-ui-standard[class][class] .pricing-modern-plan-desc {
  margin: 0 0 .25rem !important;
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-sm) !important;
  line-height: 1.45;
}

/* The plan card pads itself and then its .pricing-modern-card-body padded
   again, so every card carried ~68px of dead space top and bottom. The outer
   card owns the padding; the body just lays out. */
html body.nedate-ui-standard[class][class] .pricing-modern-card > .pricing-modern-card-body {
  padding: 0 !important;
}


/* =========================================================================
   22 · MOBILE MENU — full screen
   -------------------------------------------------------------------------
   A panel that takes the whole screen is a different object from a drawer: it
   is the only thing on screen, so it can afford larger type and needs to say
   clearly where you are and how to get out. Measured on the panel's own navy
   (#070e1c): the section label sat at 3.64:1 and 8.75px, and the link icons
   at 3.90:1 in brand red. Both are lifted below.
   ========================================================================= */

html body.nedate-ui-standard .drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  /* The live-chat launcher declares 1080 in the inline theme block but
     computes to 2140, so it floated over the menu and sat on the "Accedi"
     button. Measured, not assumed. */
  z-index: 2199 !important;
  background: rgba(7, 14, 28, .6) !important;
}

html body.nedate-ui-standard .drawer-sb {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2200 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  height: 100dvh !important;   /* the browser chrome must not clip the actions */
  /* No `display` here: Alpine's x-show hides this with an inline
     `display: none`, and an !important rule would beat that and pin the menu
     open. blade-views.css already supplies `display: flex` without it. */
  flex-direction: column;
  background: var(--sw-navy-950) !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* --- Header ------------------------------------------------------------- */
html body.nedate-ui-standard .drawer-sb__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 0 0 auto;
  min-height: 64px;
  padding: 0 1rem 0 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
html body.nedate-ui-standard .drawer-sb__title {
  color: rgba(229, 238, 250, .70);   /* 8.31:1 */
  /* the root font-size here is 14px, so .75rem would land at 10.5px */
  font-size: max(.75rem, 12px);
  font-weight: var(--sw-weight-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
}
html body.nedate-ui-standard .drawer-sb__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff !important;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--sw-radius-sm);
  font-size: 1.05rem;
  transition: background var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .drawer-sb__close:hover,
html body.nedate-ui-standard .drawer-sb__close:focus-visible { background: rgba(255, 255, 255, .16); }

/* --- Scrollable body ---------------------------------------------------- */
html body.nedate-ui-standard .drawer-sb > nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

html body.nedate-ui-standard .drawer-sb .sb-section-cap {
  padding: 0 .25rem .75rem;
  color: rgba(229, 238, 250, .70) !important;   /* was .42 → 3.64:1 */
  font-size: max(.6875rem, 11px);
  font-weight: var(--sw-weight-semi);
  letter-spacing: .14em;
}

/* --- Links -------------------------------------------------------------
   Full screen means the list can breathe: 56px rows and 1rem text instead of
   46px and 13px, which is also a comfortable thumb target. */
html body.nedate-ui-standard .drawer-sb .sb-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  margin-bottom: .25rem;
  padding: .75rem 1rem !important;
  color: var(--sw-on-dark) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--sw-radius-md) !important;
  box-shadow: none !important;
  font-size: max(1rem, 16px);
  font-weight: var(--sw-weight-medium);
  text-decoration: none;
}
html body.nedate-ui-standard .drawer-sb .sb-link .main-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0 !important;
  /* was brand red at 3.90:1 on this navy; a light neutral reads at 6.72:1 and
     leaves the brand free to mark the current page */
  color: rgba(229, 238, 250, .62) !important;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--sw-radius-sm);
  font-size: 1.05rem;
  transition: color var(--sw-dur-fast) var(--sw-ease), background var(--sw-dur-fast) var(--sw-ease);
}
html body.nedate-ui-standard .drawer-sb .sb-link:hover {
  background: rgba(255, 255, 255, .07) !important;
}
html body.nedate-ui-standard .drawer-sb .sb-link.active {
  color: #fff !important;
  background: rgba(240, 70, 81, .16) !important;
  font-weight: var(--sw-weight-semi);
}
html body.nedate-ui-standard .drawer-sb .sb-link.active .main-icon {
  color: var(--sw-brand-300) !important;           /* 10.01:1 */
  background: rgba(240, 70, 81, .18);
  border-color: rgba(240, 70, 81, .34);
}
html body.nedate-ui-standard .drawer-sb .sb-link.active::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sw-brand-500);
  content: "";
}
html body.nedate-ui-standard .drawer-sb .sb-link:focus-visible {
  outline: 2px solid var(--sw-brand-400);
  outline-offset: -2px;
}

/* --- Actions, pinned to the bottom of the screen ------------------------ */
html body.nedate-ui-standard .drawer-sb__actions {
  display: grid;
  gap: .625rem;
  margin-top: auto;          /* pushed to the foot of the full-height panel */
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
html body.nedate-ui-standard .drawer-sb__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .8rem 1.25rem;
  color: var(--sw-on-dark) !important;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--sw-radius-sm);
  font-size: max(1rem, 16px);
  font-weight: var(--sw-weight-semi);
  text-decoration: none !important;
}
html body.nedate-ui-standard .drawer-sb__cta:hover { background: rgba(255, 255, 255, .14); }
html body.nedate-ui-standard .drawer-sb__cta--primary {
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard .drawer-sb__cta--primary:hover { background: var(--sw-brand-700) !important; }

/* Sub-links inside collapsible groups (logged-in users) follow the same scale */
html body.nedate-ui-standard .drawer-sb .sb-sub-link {
  min-height: 44px;
  padding: .5rem 1rem .5rem 3.4rem !important;
  color: rgba(229, 238, 250, .70) !important;
  border: 0 !important;
  border-radius: var(--sw-radius-sm) !important;
  font-size: var(--sw-text-sm);
}
html body.nedate-ui-standard .drawer-sb .sb-subsection-toggle {
  width: 100%;
  min-height: 44px;
  padding: .55rem .85rem .55rem 2.25rem;
  color: rgba(229, 238, 250, .76);
  background: transparent;
  border: 0;
  border-radius: var(--sw-radius-sm);
  font-size: var(--sw-text-sm);
}
html body.nedate-ui-standard .drawer-sb .sb-subsection-toggle:hover,
html body.nedate-ui-standard .drawer-sb .sb-subsection-toggle.active {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}
html body.nedate-ui-standard .drawer-sb .sb-subsection-items .sb-sub-link {
  padding-left: 4.35rem !important;
}
html body.nedate-ui-standard .drawer-sb .sb-sub-link:hover,
html body.nedate-ui-standard .drawer-sb .sb-sub-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
}

/* =========================================================================
   23. HERO TOOL CARD — preventivo / tracking
   -------------------------------------------------------------------------
   Questo componente viveva in un <style> di 899 righe dentro welcome.blade.php,
   spinto da @push('styles') che carica alla riga 128 del layout — cioè PRIMA
   di questo foglio (riga 301). Non potendo vincere per ordine vinceva urlando:
   343 !important su 70 regole, e ogni regola dark riscritta sette volte
   (html[data-theme], html[data-bs-theme], body[data-theme], body[data-bs-theme],
   .dark, .dark-mode, .theme-dark) — una sola regola arrivava a 42 selettori.

   Qui la scala locale --wmq-* deriva dai token, quindi il tema cambia da solo
   e il blocco dark non esiste più: 27 regole × 7 selettori → zero.
   ========================================================================= */
html body.nedate-ui-standard .welcome-modern-hero-tool-card {
  --wmq-field:        var(--sw-surface);
  --wmq-field-alt:    var(--sw-surface-2, var(--sw-canvas));
  --wmq-text:         var(--sw-ink);
  --wmq-muted:        var(--sw-muted);
  /* Era --sw-line (#e4e9f0): su bianco fa 1,3:1, sotto la soglia di 3:1 della
     1.4.11, e non corrispondeva al bordo degli altri campi del sito. */
  --wmq-border:       var(--sw-field-border);
  --wmq-border-strong:var(--sw-line-strong);
  --wmq-x:            16px;
  --wmq-h:            58px;
  /* La larghezza della coda «kg»/«cm». Sta fra i token perche' la leggono in
     due: questa regola e quella del tema scuro in `nedate-design-system.css`,
     che prima ne aveva una sua (52px con 12px di rientro) e faceva uscire le
     caselle dei numeri sei pixel piu' larghe al buio che alla luce. */
  --wmq-unit-w:       58px;
  /* Lo stacco fra paese e citta' dello stesso estremo. Anche questo lo
     leggono in due: qui e la regola del tema scuro, che ne aveva 14. */
  --wmq-pair-gap:     12px;
  --wmq-radius:       var(--sw-field-radius, 5px);
  /* il rientro dei campi con l'icona dentro, lo stesso di /tracking e /accedi */
  --wmq-icon-col:     2.85rem;
}

/* --- Barra tab ----------------------------------------------------------- */
html body.nedate-ui-standard .welcome-modern-page .welcome-modern-hero-tool-card .tool-tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--wmq-border) !important;
}
html body.nedate-ui-standard .welcome-modern-page .welcome-modern-hero-tool-card .tool-tab {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 18px !important;
  gap: 10px;
  color: var(--wmq-muted) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-bold) !important;
  letter-spacing: 0 !important;
  line-height: 1;
}
html body.nedate-ui-standard .welcome-modern-page .welcome-modern-hero-tool-card .tool-tab.active {
  color: var(--sw-brand-600) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--sw-brand-600) !important;
}

/* --- Campo con etichetta interna ---------------------------------------
   L'etichetta è in posizione assoluta dentro la scatola e il campo le lascia
   spazio con 26px di padding sopra e 8px sotto. */
html body.nedate-ui-standard .welcome-modern-hero-tool-card .log-input-group {
  position: relative !important;
  width: 100% !important;
  height: var(--wmq-h) !important;
  min-height: var(--wmq-h) !important;
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--wmq-text) !important;
  background: var(--wmq-field) !important;
  border: 1px solid var(--wmq-border) !important;
  border-radius: var(--wmq-radius) !important;
  box-shadow: none !important;
}
/* Il contenitore di paese+citta' e' un involucro, non un campo: l'anello di
   focus qui avvolgeva due controlli insieme. Resta sul singolo box. */
html body.nedate-ui-standard .welcome-modern-hero-tool-card .log-input-group:not(:has(.log-select-btn)):focus-within {
  border-color: var(--sw-brand-500) !important;
  box-shadow: var(--sw-focus-ring, 0 0 0 3px rgba(217, 35, 54, .18)) !important;
}
/* Misura, peso e spaziatura dell'etichetta non sono piu' scritti qui: sono i
   token che valgono su tutto il sito. Erano 10px con .055em, contro gli 11px
   con .04em di ogni altra etichetta — la differenza si vedeva mettendo il
   preventivo della home accanto a quello di /spedizioni, che da quello e'
   nato.

   L'8 in cima invece resta 8, e non e' una svista: qui la scatola che
   contiene l'etichetta ha una cornice di 1px, e l'etichetta parte da dentro
   quella cornice. 8+1 fa i 9px dal bordo esterno che l'etichetta ha su ogni
   altra pagina. Messo a 9 ne faceva 10, e il pixel si vedeva. */
html body.nedate-ui-standard .welcome-modern-hero-tool-card :is(.log-label, .log-input-inner-label) {
  position: absolute !important;
  top: 8px !important;
  left: var(--wmq-x) !important;
  z-index: 6 !important;
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--wmq-muted) !important;
  font-family: var(--sw-font-label) !important;
  font-size: var(--sw-label-fs, 11px) !important;
  font-weight: var(--sw-label-weight, 600) !important;
  line-height: 1 !important;
  letter-spacing: var(--sw-label-track, .04em) !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card :is(input.log-input, .log-input) {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 26px var(--wmq-x) 8px var(--wmq-x) !important;
  color: var(--wmq-text) !important;
  -webkit-text-fill-color: var(--wmq-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card :is(input.log-input, .log-input)::placeholder {
  color: var(--wmq-muted) !important;
  -webkit-text-fill-color: var(--wmq-muted) !important;
  opacity: .88 !important;
  font-weight: var(--sw-weight-medium, 500) !important;
}
/* L'unità (kg / cm) è una colonna della stessa scatola, non un campo a parte. */
html body.nedate-ui-standard .welcome-modern-hero-tool-card .log-unit {
  width: var(--wmq-unit-w, 58px) !important;
  min-width: var(--wmq-unit-w, 58px) !important;
  height: 100% !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--wmq-text) !important;
  background: var(--wmq-field-alt) !important;
  border-left: 0 !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-bold) !important;
  line-height: 1 !important;
}

/* --- Paese + città: due scatole affiancate, non una capsula sola --------- */
html body.nedate-ui-standard .welcome-modern-hero-tool-card .country-select .log-input-group {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card .country-select .log-select-btn {
  position: relative !important;
  width: 100% !important;
  height: var(--wmq-h) !important;
  min-height: var(--wmq-h) !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px 0 !important;
  padding: 26px var(--wmq-x) 8px var(--wmq-x) !important;
  color: var(--wmq-text) !important;
  background: var(--wmq-field) !important;
  border: 1px solid var(--wmq-border) !important;
  border-radius: var(--wmq-radius) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-bold) !important;
  line-height: 1.15 !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card .country-select .log-select-btn .fi {
  width: 20px !important;
  min-width: 20px !important;
  height: 14px !important;
  margin: 0 !important;
  align-self: center !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card .country-select .log-select-btn :is(.country-name, .ms-2) {
  margin-left: 0 !important;
  color: var(--wmq-text) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-bold) !important;
  line-height: 1.15 !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card .country-select .log-select-btn .bi-chevron-down {
  position: absolute !important;
  right: var(--wmq-x) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  color: var(--wmq-muted) !important;
  opacity: 1 !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card .country-select .log-city-field {
  position: relative !important;
  /* 56 scritti a mano, mentre ogni altro campo del sito ne misura 58: due
     pixel, ma messi in fila con quelli di /spedizioni si vedevano. */
  height: var(--wmq-h) !important;
  background: var(--wmq-field) !important;
  border: 1px solid var(--wmq-border) !important;
  border-radius: var(--wmq-radius) !important;
  overflow: hidden !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card .country-select .log-city-field:focus-within {
  border-color: var(--sw-brand-500) !important;
  box-shadow: var(--sw-focus-ring, 0 0 0 3px rgba(217, 35, 54, .18)) !important;
}

/* --- Tendine ------------------------------------------------------------- */
html body.nedate-ui-standard .welcome-modern-hero-tool-card :is(.log-dropdown, .qq-city-dd) {
  top: calc(100% - 1px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 20 !important;
  margin: 0 !important;
  color: var(--wmq-text) !important;
  background: var(--wmq-field) !important;
  border: 1px solid var(--wmq-border) !important;
  border-top: 0 !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card .country-search {
  height: 42px !important;
  color: var(--wmq-text) !important;
  -webkit-text-fill-color: var(--wmq-text) !important;
  background: var(--wmq-field-alt) !important;
  border-color: var(--wmq-border) !important;
  border-radius: 8px !important;
  font-size: var(--sw-text-sm) !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card :is(.log-dd-item, .qq-city-item) {
  color: var(--wmq-text) !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card :is(.log-dd-item:hover, .qq-city-item:hover, .qq-city-item.active) {
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
}

/* --- Blocco tracking ----------------------------------------------------- */
html body.nedate-ui-standard .welcome-modern-track-form :is(.bg-light.rounded-circle, .d-inline-flex.bg-light) {
  width: 64px !important;
  height: 64px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--sw-brand-600) !important;
  background: var(--wmq-field-alt, var(--sw-canvas)) !important;
  border: 1px solid var(--wmq-border, var(--sw-line)) !important;
}
html body.nedate-ui-standard .welcome-modern-track-form h3 {
  color: var(--sw-ink) !important;
  font-size: 22px !important;
  font-weight: var(--sw-weight-bold) !important;
  letter-spacing: -.02em !important;
}
html body.nedate-ui-standard .welcome-modern-track-form :is(p, .text-muted) {
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-sm) !important;
}
/* L'icona sta **dentro** il campo, come su /tracking e su /accedi: prima era
   una colonna a parte, con un fondo suo e una riga di mezzo, e il campo
   sembrava due scatole attaccate. La larghezza e' il rientro che hanno tutti i
   campi con icona del sito (2,85rem), cosi' il testo parte dove parte li'. */
html body.nedate-ui-standard .welcome-modern-track-form .log-input-group > span {
  width: var(--wmq-icon-col, 2.85rem) !important;
  min-width: var(--wmq-icon-col, 2.85rem) !important;
  height: 100% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--sw-muted) !important;
  background: transparent !important;
  border-right: 0 !important;
}

/* Nel tracking il campo ha una colonna icona da 52px a sinistra: l'etichetta
   interna, ancorata a --wmq-x, ci finiva sopra. Qui parte dopo la colonna. */
/* L'etichetta parte dove parte il valore: dopo la colonna dell'icona **e**
   dopo il rientro del campo, o resterebbe sedici pixel piu' a sinistra. */
html body.nedate-ui-standard .welcome-modern-track-form .log-input-group > :is(.log-label, .log-input-inner-label) {
  left: calc(var(--wmq-icon-col, 2.85rem) + var(--wmq-x, 16px)) !important;
}

/* --- Blocco pacco: peso + misure ----------------------------------------
   La regola 1.4.11 dà un bordo ai campi, e su questi input si sommava a quello
   della scatola che li contiene: si vedevano due rettangoli affiancati invece
   di un controllo solo, con il chip dell'unità staccato e arrotondato su tutti
   i lati. Qui l'input torna senza bordo e l'unità diventa una colonna della
   stessa scatola, separata da una linea. */
html body.nedate-ui-standard[class][class] .welcome-modern-page .welcome-modern-hero-tool-card :is(input.log-input, .log-input) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard[class][class] .welcome-modern-page .welcome-modern-hero-tool-card .log-unit {
  border-radius: 0 !important;
}
/* Le frecce su/giù dei campi numerici rubano spazio e, in un gruppo di tre,
   coprono i separatori. */
html body.nedate-ui-standard .welcome-modern-hero-tool-card input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
html body.nedate-ui-standard .welcome-modern-hero-tool-card input[type="number"]::-webkit-outer-spin-button,
html body.nedate-ui-standard .welcome-modern-hero-tool-card input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

html body.nedate-ui-standard .welcome-modern-hero-tool-card .qq-parcel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 576px) {
  html body.nedate-ui-standard .welcome-modern-hero-tool-card .qq-parcel {
    grid-template-columns: minmax(0, 148px) minmax(0, 1fr);
  }
}

/* Le tre misure condividono una scatola sola, separate da ×, con una sola
   unità in fondo. */
html body.nedate-ui-standard[class][class] .welcome-modern-page .welcome-modern-hero-tool-card .qq-dims {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 var(--wmq-x);
}
html body.nedate-ui-standard[class][class] .welcome-modern-page .welcome-modern-hero-tool-card .qq-dim {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}
html body.nedate-ui-standard[class][class] .welcome-modern-page .welcome-modern-hero-tool-card .qq-dim-sep {
  flex: 0 0 auto;
  color: var(--wmq-muted);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}
/* Il focus va sul campo toccato, non sull'intera terna. */
html body.nedate-ui-standard[class][class] .welcome-modern-page .welcome-modern-hero-tool-card .qq-dim:focus {
  outline: 2px solid var(--sw-brand-500) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* I quattro campi numerici sono contesi da regole a classi che rimettono
   bordo, sfondo e padding; il blocco inline originale li vinceva doppiando
   l'id (#qq_weight#qq_weight). Stessa leva, scritta una volta: un selettore
   per id basta a superare qualunque regola a classi. */
html body.nedate-ui-standard #qq_weight,
html body.nedate-ui-standard #qq_depth,
html body.nedate-ui-standard #qq_width,
html body.nedate-ui-standard #qq_height {
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: var(--sw-text-sm) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
}
html body.nedate-ui-standard #qq_weight {
  padding: 26px var(--wmq-x, 16px) 8px var(--wmq-x, 16px) !important;
}
/* Ogni misura riempie l'altezza della scatola: il bersaglio da toccare passa
   da ~20px a 58px, sopra il minimo di 24px della 2.5.8. Il testo resta dov'era,
   tenuto giù dai 26px di padding come negli altri campi. */
html body.nedate-ui-standard #qq_depth,
html body.nedate-ui-standard #qq_width,
html body.nedate-ui-standard #qq_height {
  height: 100% !important;
  padding: 26px 0 8px 0 !important;
  text-align: center !important;
}

/* --- Percorso: due coppie, non quattro campi ----------------------------
   Paese e città dello stesso estremo erano separati da 14px, e le due coppie
   fra loro da 16px: a occhio erano quattro campi indipendenti. La prossimità
   ora dice la gerarchia — 6px dentro la coppia, 24px fra le coppie. */
html body.nedate-ui-standard[class][class] .welcome-modern-page .welcome-modern-hero-tool-card .country-select .log-select-btn {
  margin-bottom: var(--wmq-pair-gap, 12px) !important;
}
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .welcome-modern-hero-tool-card .country-select[data-name="from"] {
    margin-bottom: 8px;
  }
}

/* I separatori erano quasi invisibili: sono loro a dire che è 30 per 20 per 10. */
html body.nedate-ui-standard[class][class] .welcome-modern-page .welcome-modern-hero-tool-card .qq-dim-sep {
  align-self: center;
  font-size: 13px;
  color: var(--sw-muted);
}

/* =========================================================================
   24. CONTROLLI FORM — un solo livello per input, select, textarea,
       checkbox, radio e bottoni
   -------------------------------------------------------------------------
   Misurato a schermo su /contact-us, /login e /register: cinque dimensioni di
   font sui bottoni (10, 11.4, 12.6, 13.1, 14px), quattro pesi (500/600/800/900
   — e 800 e 900 non esistono nel pacchetto Archivo, il browser li finge
   sbavando i contorni), sette altezze fra 36 e 56px, quattro raggi.

   La causa comune è che `html` ha font-size 14px, non i 16px di default: ogni
   misura in rem rende il 12,5% più piccola di quanto la regola dichiari
   (1.25rem sulla checkbox = 17,5px invece di 20). Cambiare la radice
   ricalcolerebbe ogni misura del sito, area autenticata inclusa; qui i
   controlli sono espressi in px, così valgono quanto dicono.
   ========================================================================= */
html body.nedate-ui-standard {
  --sw-control-h:    48px;
  --sw-control-h-sm: 40px;
  --sw-control-h-lg: 56px;
  --sw-control-r:    10px;
  --sw-control-px:   14px;
  /* Tre livelli, non tre stili a caso: l'etichetta e' metadato e sta sotto,
     il valore e' il contenuto e sta sopra, l'unita' torna a essere metadato.
     Prima l'etichetta era 12,3px maiuscola spaziata contro un valore di 14px
     minuscolo — in maiuscolo con spaziatura occupa piu' spazio visivo, ed e'
     per questo che le etichette gridavano piu' dei dati. */
  --sw-label-fs:     11px;
  --sw-label-weight: 600;
  --sw-label-track:  .04em;
  /* Archivo e IBM Plex qui arrivano a 700: 800 e 900 il browser li sintetizza,
     ed e' da li' che venivano i contorni impastati. Il token li ferma a 700. */
  --sw-weight-max:   700;
  /* il ponte verso i token legacy letti dalle regole nucleari */
  --sw-ink-label:    var(--sw-label-ink);
  --sw-control-fs:   15px;
  /* Il testo guida e' un gradino sotto il valore e non segue il salto a 16px
     del telefono: quello serve a evitare lo zoom di iOS quando si tocca un
     campo, e riguarda cio' che si scrive, non il suggerimento. */
  --sw-placeholder-fs: 14px;
  --sw-unit-fs:      13px;
  --sw-check-size:   20px;
  /* Le etichette dei campi stanno sul fondo del campo, non sul canvas: in dark
     quel fondo e' piu' chiaro e il muted scendeva a 3,7:1. Token proprio. */
  --sw-label-ink:    var(--sw-muted);
}
/* I form d'ingresso e la card dell'hero usano deliberatamente la taglia
   grande: è una scelta, non più un caso. */
html body.nedate-ui-standard :is(.login-page, .register-page, .welcome-modern-hero-tool-card) {
  --sw-control-h: var(--sw-control-h-lg);
}

/* --- Campi di testo ------------------------------------------------------ */
html body.nedate-ui-standard[class][class] :is(.form-control, .form-select, textarea.form-control,
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="tel"], input[type="number"], input[type="url"], input[type="date"]) {
  font-family: var(--sw-font-body, inherit) !important;
  font-size: var(--sw-control-fs) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.4 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: var(--sw-control-r) !important;
}
html body.nedate-ui-standard[class][class] :is(.form-control, .form-select):not(textarea) {
  min-height: var(--sw-control-h) !important;
}
html body.nedate-ui-standard[class][class] textarea.form-control {
  min-height: calc(var(--sw-control-h) * 2) !important;
  padding-block: 12px !important;
}
/* Sotto i 768px il testo dei campi sale a 16px: sotto quella soglia iOS
   Safari ingrandisce la pagina appena si tocca un campo, e non la rimette
   più a posto. Vale solo per i controlli, non per il resto della tipografia. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard {
    --sw-control-fs: 16px;
  }
  html body.nedate-ui-standard[class][class] :is(.form-control, .form-select, textarea,
    input[type="text"], input[type="email"], input[type="password"], input[type="search"],
    input[type="tel"], input[type="number"], input[type="url"], input[type="date"]) {
    font-size: 16px !important;
  }
}

/* --- Checkbox e radio ---------------------------------------------------
   Erano i widget nativi del sistema operativo: nessuna regola dichiarava
   `appearance: none`, quindi bordo, sfondo e raggio venivano ignorati e in
   mezzo a campi disegnati comparivano due quadratini grigi di sistema. */
html body.nedate-ui-standard[class][class] :is(input[type="checkbox"], input[type="radio"]):not(.btn-check):not(.form-switch .form-check-input) {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: var(--sw-check-size) !important;
  height: var(--sw-check-size) !important;
  min-width: var(--sw-check-size) !important;
  min-height: var(--sw-check-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  background-color: var(--sw-surface) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 70% 70% !important;
  border: 1.5px solid var(--sw-field-border) !important;
  cursor: pointer !important;
  transition: background-color var(--sw-dur-fast, .15s) var(--sw-ease, ease),
              border-color var(--sw-dur-fast, .15s) var(--sw-ease, ease) !important;
}
html body.nedate-ui-standard[class][class] input[type="checkbox"]:not(.btn-check) {
  border-radius: 6px !important;
}
html body.nedate-ui-standard[class][class] input[type="radio"]:not(.btn-check) {
  border-radius: 50% !important;
}
/* Le regole di stato qui sotto portano la stessa guardia sugli interruttori
   della regola base: senza, la base pesava (0,7,3) — il `:not()` con due
   classi dentro gonfia la specificita' — e gli stati (0,6,3) perdevano.
   Risultato: la casella selezionata restava bianca con la spunta bianca
   sopra, cioe' invisibile, su tutto il sito. Con la guardia pareggiano e
   vincono per posizione. */
html body.nedate-ui-standard[class][class] :is(input[type="checkbox"], input[type="radio"]):not(.btn-check):not(.form-switch .form-check-input):hover {
  border-color: var(--sw-brand-500) !important;
}
html body.nedate-ui-standard[class][class] input[type="checkbox"]:not(.btn-check):not(.form-switch .form-check-input):checked {
  background-color: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 8 14.5 16 6'/%3E%3C/svg%3E") !important;
}
html body.nedate-ui-standard[class][class] input[type="radio"]:not(.btn-check):not(.form-switch .form-check-input):checked {
  background-color: var(--sw-surface) !important;
  border-color: var(--sw-brand-600) !important;
  border-width: 6px !important;
}
html body.nedate-ui-standard[class][class] :is(input[type="checkbox"], input[type="radio"]):not(.btn-check):not(.form-switch .form-check-input):focus-visible {
  outline: 2px solid var(--sw-brand-500) !important;
  outline-offset: 2px !important;
}
html body.nedate-ui-standard[class][class] :is(input[type="checkbox"], input[type="radio"]):not(.btn-check):not(.form-switch .form-check-input):disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}
/* La riga intera è il bersaglio: 20px di casella più il testo accanto. */
html body.nedate-ui-standard .form-check {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  min-height: 24px !important;
  padding-left: 0 !important;
}

/* --- Bottoni -------------------------------------------------------------
   Un peso solo — 600. I 900 e gli 800 che c'erano chiedevano pesi che il
   pacchetto Archivo non contiene: il browser li sintetizzava, ed è da lì che
   venivano i contorni impastati. */
html body.nedate-ui-standard[class][class] :is(.btn, button.btn, a.btn, .btn-primary-custom,
  .contact-modern-submit, .tracking-login-submit, .faq-modern-primary-btn,
  .pricing-modern-plan-btn, .pricing-modern-cta-btn, .welcome-modern-action-primary,
  .welcome-modern-action-secondary, .welcome-modern-plan-button, .btn-action,
  .faq-redesign-search-btn, .faq-redesign-support-btn, .btn-auth-glass):not(.btn-close):not(.btn-link) {
  min-height: var(--sw-control-h) !important;
  padding-inline: 18px !important;
  font-family: var(--sw-font-body, inherit) !important;
  font-size: var(--sw-control-fs) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  border-radius: var(--sw-control-r) !important;
}
html body.nedate-ui-standard[class][class] :is(.btn-sm, .btn-group-sm > .btn) {
  min-height: var(--sw-control-h-sm) !important;
  padding-inline: 12px !important;
  font-size: 13px !important;
}
html body.nedate-ui-standard[class][class] :is(.btn-lg, .btn-group-lg > .btn) {
  min-height: var(--sw-control-h-lg) !important;
  padding-inline: 24px !important;
  font-size: 15px !important;
}
/* Le etichette dentro i bottoni ereditavano pesi propri. */
html body.nedate-ui-standard[class][class] .btn :is(.btn-label, span, strong) {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

/* --- Controlli secondari (chip e pillole) -------------------------------
   Erano a 10,1 / 11,4 / 12,6px con tre raggi diversi: sono la stessa cosa —
   un'azione secondaria in linea — e ora hanno una taglia sola. */
html body.nedate-ui-standard[class][class] :is(.contact-modern-topic-chip,
  .nedate-footer-theme-pill, .nedate-footer-email-button, .billing-btn) {
  min-height: var(--sw-control-h-sm) !important;
  font-size: 13px !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: 0 !important;
}
html body.nedate-ui-standard[class][class] :is(.contact-modern-topic-chip,
  .nedate-footer-theme-pill) {
  border-radius: 999px !important;
  padding-inline: 14px !important;
}

/* Due controlli restavano fuori scala perché contesi da regole per id o a
   cinque classi. Stessa leva: un id batte qualunque regola a classi. */
html body.nedate-ui-standard :is(#loginSubmitBtn, #magicSubmitBtn, #btn-submit, #btn-register) {
  min-height: var(--sw-control-h-lg) !important;
  font-size: 15px !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  border-radius: var(--sw-control-r) !important;
}
html body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(.contact-modern-topic-chip, .contact-login-topics .contact-modern-topic-chip) {
  font-size: 13px !important;
  min-height: var(--sw-control-h-sm) !important;
}

/* Ultimo ostinato: il submit di accesso. L'id doppio vale (2,0,0) e chiude
   la questione senza dover trovare quale delle 28 fonti lo rimpicciolisce. */
html body.nedate-ui-standard #loginSubmitBtn#loginSubmitBtn,
html body.nedate-ui-standard #loginSubmitBtn#loginSubmitBtn :is(span, .btn-label, strong),
html body.nedate-ui-standard #magicSubmitBtn#magicSubmitBtn,
html body.nedate-ui-standard #magicSubmitBtn#magicSubmitBtn :is(span, .btn-label, strong) {
  font-size: 15px !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}

/* --- Segmenti selezionabili (tipo account, tab di accesso) ---------------
   Il segmento attivo aveva lo stesso grigio di quello inattivo su una velatura
   rosa: 4,16:1, sotto AA, e con meno contrasto del non selezionato — cioè il
   contrario di quel che deve dire. Ora è inchiostro di brand sulla tinta di
   brand, con il bordo che lo conferma. */
html body.nedate-ui-standard[class][class][class] :is(.register-page__type-btn, .login-page__tabs .nav-link, .type-btn) {
  font-size: var(--sw-control-fs) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  min-height: var(--sw-control-h) !important;
}
html body.nedate-ui-standard[class][class][class] :is(.register-page__type-btn.active,
  .login-page__tabs .nav-link.active, .type-btn.active,
  input:checked + .type-btn, input:checked + .register-page__type-btn) {
  --sw-ink-label: var(--sw-on-brand);
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border-color: transparent !important;
}
html body.nedate-ui-standard[class][class][class][class] :is(.register-page__type-btn.active,
  .login-page__tabs .nav-link.active, .type-btn.active,
  input:checked + .type-btn, input:checked + .register-page__type-btn),
html body.nedate-ui-standard[class][class][class][class] :is(.register-page__type-btn.active,
  .login-page__tabs .nav-link.active, .type-btn.active,
  input:checked + .type-btn, input:checked + .register-page__type-btn) :is(span, i, strong) {
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
}

html[data-theme="dark"] body.nedate-ui-standard,
html body.nedate-ui-standard.dark-mode {
  --sw-label-ink: #aebdd0;   /* 5,15:1 sul fondo dei campi scuri */
}
html body.nedate-ui-standard[class][class][class] :is(.form-label, .log-label,
  .log-input-inner-label, .login-page__label, .register-page__label, label.form-label) {
  color: var(--sw-label-ink) !important;
}
/* Nel form di accesso le etichette sono <label> nudi, senza classe. */
html body.nedate-ui-standard[class][class][class] :is(.login-page, .register-page, .forgot-refresh-page) label:not(.form-check-label):not(.type-btn):not(.register-page__type-btn) {
  color: var(--sw-label-ink) !important;
}

/* Gli input di testo della card prendevano anche il bordo generico dei campi
   (sezione 24) sopra a quello della scatola che li contiene: due rettangoli
   annidati, e sul campo citta' il raggio interno tagliato da overflow:hidden
   faceva sembrare diverso il bordo inferiore. Qui restano nudi: la scatola
   disegna il bordo, l'input ci scrive dentro. */
html body.nedate-ui-standard #qq_from_city,
html body.nedate-ui-standard #qq_to_city,
html body.nedate-ui-standard #qq_track_code,
html body.nedate-ui-standard #qq_from_country_search,
html body.nedate-ui-standard #qq_to_country_search {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-height: 0 !important;
}
/* Il testo digitato partiva 2,7px piu' a sinistra della propria etichetta: una
   regola legacy dava 13,3px di padding dove l'etichetta e' ancorata a 16px. */
html body.nedate-ui-standard :is(#qq_from_city, #qq_to_city, #qq_track_code) {
  padding: 26px var(--wmq-x, 16px) 8px var(--wmq-x, 16px) !important;
}
html body.nedate-ui-standard :is(#qq_from_country_search, #qq_to_country_search) {
  border: 1px solid var(--wmq-border) !important;
  border-radius: 8px !important;
  background: var(--wmq-field-alt) !important;
}

/* L'involucro di paese+citta' non e' un campo e non deve disegnare mai nulla:
   ne' a riposo ne' al focus. Senza questo, qualunque regola futura su
   .log-input-group tornerebbe a tracciare un rettangolo attorno ai due
   controlli, facendoli sembrare un campo solo. */
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card .country-select > .log-input-group,
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card .country-select > .log-input-group:focus-within,
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card .country-select > .log-input-group:hover {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* --- Ritmo verticale della card -----------------------------------------
   Le distanze fra i campi arrivavano da tre sorgenti diverse: il margine del
   box paese (12px), il gutter della .row di Bootstrap (20px su mobile) e il
   .mb-4 fra percorso e pacco (17px). Tre valori per la stessa cosa. Qui il
   passo e' uno solo, 12px fra tutti i campi, e 24px prima dell'azione — che
   non e' un campo e deve staccarsi. */
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card #tab-quote .row {
  --bs-gutter-y: 12px !important;
  /* nessun margine qui: la distanza fra i blocchi la da' il gap del form,
     altrimenti i due valori si sommano */
}
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card .country-select[data-name="from"] {
  margin-bottom: 0 !important;
}
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card .qq-parcel {
  gap: 12px !important;
  margin-bottom: 0 !important;
}
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card .qq-actions {
  margin-top: 24px !important;
}

/* Il form e' un flex in colonna con `gap`, quindi ogni distanza fra i blocchi
   era la somma del gap (2,1px) piu' i margini Bootstrap di ciascun figlio: tre
   sorgenti per lo stesso spazio. Il ritmo sta ora nel gap, una volta sola, e i
   margini dei figli sono azzerati. */
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card #qq_form {
  gap: 12px !important;
}
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card #qq_form > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* La riga di Bootstrap usa un margine negativo in cima per compensare il
   gutter delle colonne: va conservato, altrimenti il percorso scende di 12px. */
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card #qq_form > .row {
  margin-top: calc(-1 * var(--bs-gutter-y, 12px)) !important;
}
/* L'azione non e' un campo: si stacca al doppio del passo. */
html body.nedate-ui-standard[class][class] .welcome-modern-hero-tool-card #qq_form > .qq-actions {
  margin-top: 12px !important;
}

/* Stesso ritmo nella scheda Tracking: il campo e il bottone si toccavano.
   24px fra l'ultimo campo e l'azione, come nel preventivo. */
html body.nedate-ui-standard[class][class] .welcome-modern-track-form .log-input-group {
  margin-bottom: 24px !important;
}
html body.nedate-ui-standard[class][class] .welcome-modern-track-form .row {
  --bs-gutter-y: 12px !important;
}

/* =========================================================================
   25. SCALA TIPOGRAFICA DEI CONTROLLI — etichetta, valore, unita'
   -------------------------------------------------------------------------
   Misurato prima: etichette a 12,3px/500 in un punto e 10,5px/600 in un altro,
   valori a 13,1px/700 ("Italy") e 14px/500 (i numeri), unita' a 13,1px/700 —
   piu' pesanti del dato che accompagnano. Tre livelli con un valore ciascuno.
   ========================================================================= */

/* --- 1. Etichetta: metadato, il livello piu' basso ---------------------- */
html body.nedate-ui-standard[class][class][class] :is(.form-label, .log-label,
  .log-input-inner-label, .login-page__label, .register-page__label,
  .nedate-filter-panel label, .log-select-btn > label) {
  font-size: var(--sw-label-fs) !important;
  font-weight: var(--sw-label-weight) !important;
  letter-spacing: var(--sw-label-track) !important;
  line-height: 1.2 !important;
  color: var(--sw-label-ink) !important;
}

/* --- 2. Valore: il contenuto, un gradino sopra --------------------------- */
html body.nedate-ui-standard[class][class][class] :is(.form-control, .form-select,
  .log-input, input.log-input, textarea.form-control,
  .log-select-btn .country-name, .log-select-btn > .ms-2) {
  font-size: var(--sw-control-fs) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  letter-spacing: 0 !important;
  color: var(--sw-ink) !important;
}

/* --- 3. Unita' e suffissi: di nuovo metadato ---------------------------- */
html body.nedate-ui-standard[class][class][class] :is(.log-unit, .input-group-text,
  .qq-dim-sep, .sw-field-suffix) {
  font-size: var(--sw-unit-fs) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  letter-spacing: 0 !important;
  color: var(--sw-muted) !important;
}

/* Common right-side unit/suffix inside standard floating fields:
   same visual language as kg/cm, reusable for €, %, etc. */
html body.nedate-ui-standard .sw-field-with-suffix {
  position: relative !important;
}
html body.nedate-ui-standard .sw-field-with-suffix > .form-control,
html body.nedate-ui-standard .sw-field-with-suffix > .form-select,
html body.nedate-ui-standard .sw-field-with-suffix > .form-floating > .form-control,
html body.nedate-ui-standard .sw-field-with-suffix > .form-floating > .form-select {
  padding-right: 3.25rem !important;
}
html body.nedate-ui-standard .sw-field-with-suffix > .form-floating {
  width: 100% !important;
}
html body.nedate-ui-standard .sw-field-with-suffix > .sw-field-suffix {
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  line-height: 1 !important;
}

/* --- Il bottone segue la scala del valore ------------------------------- */
html body.nedate-ui-standard[class][class][class] :is(.btn, button.btn, a.btn,
  .btn-primary-custom, .contact-modern-submit, .tracking-login-submit,
  .faq-modern-primary-btn, .pricing-modern-plan-btn, .pricing-modern-cta-btn,
  .welcome-modern-action-primary, .welcome-modern-action-secondary,
  .welcome-modern-plan-button, .btn-action):not(.btn-close):not(.btn-link):not(.btn-sm) {
  font-size: var(--sw-control-fs) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}

/* Le etichette scritte come <label> restavano a 12,3px: nella regola sopra
   stanno dentro un :is(), che assume la specificita' del proprio argomento
   piu' alto e in questo caso la abbassava. Qui sono selettori distesi. */
html body.nedate-ui-standard[class][class][class][class][class][class][class][class] label.log-label,
html body.nedate-ui-standard[class][class][class][class][class][class][class][class] label.form-label,
html body.nedate-ui-standard[class][class][class][class] span.log-label,
html body.nedate-ui-standard[class][class][class][class] .log-input-inner-label,
html body.nedate-ui-standard[class][class][class][class] .log-select-btn > label,
html body.nedate-ui-standard[class][class][class][class] .log-input-group > label {
  font-size: var(--sw-label-fs) !important;
  font-weight: var(--sw-label-weight) !important;
  letter-spacing: var(--sw-label-track) !important;
  line-height: 1.2 !important;
  color: var(--sw-label-ink) !important;
}

/* =========================================================================
   26. BORDI E SUPERFICI DEI CONTROLLI
   -------------------------------------------------------------------------
   Misurato: i campi avevano due sfondi (bianco pieno nella card, bianco al 94%
   sulle pagine), il chip dell'unita' un fondo grigio-azzurro con un divisorio
   #cfd8e4 diverso dal bordo #7690b2 della scatola che lo contiene, e i bottoni
   ora 1px solid ora 0 none — cioe' due box model per lo stesso componente.
   ========================================================================= */
html body.nedate-ui-standard {
  --sw-field-bg:     var(--sw-surface);
  --sw-field-bw:     1px;
}

/* --- Un solo sfondo per tutti i campi ------------------------------------ */
html body.nedate-ui-standard[class][class][class] :is(.form-control, .form-select,
  textarea.form-control, .log-input-group, .log-select-btn, .log-city-field) {
  background-color: var(--sw-field-bg) !important;
  border-width: var(--sw-field-bw) !important;
  border-style: solid !important;
  border-color: var(--sw-field-border) !important;
}
/* l'involucro paese+citta' resta senza superficie: non e' un campo */
html body.nedate-ui-standard[class][class][class] .country-select > .log-input-group {
  background-color: transparent !important;
  border-width: 0 !important;
}

/* --- Unita' (kg, cm): suffisso del campo, non un secondo blocco ----------
   Il fondo pieno le faceva leggere come pulsanti. Restano dentro la scatola,
   separate da una linea dello stesso colore del bordo: il campo e' uno solo
   e l'unita' e' la sua coda. */
html body.nedate-ui-standard[class][class][class] :is(.log-unit, .input-group-text) {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  color: var(--sw-muted) !important;
}
/* quando l'addon sta a sinistra (icona del tracking) la linea va a destra */
html body.nedate-ui-standard[class][class][class] .log-input-group > :is(.log-unit, .input-group-text):first-child {
  border-left: 0 !important;
  border-right: var(--sw-field-bw) solid var(--sw-field-border) !important;
}

/* --- Bottoni: stesso box model per tutti --------------------------------
   I riempiti avevano bordo 0 e gli altri 1px: a parita' di padding erano alti
   2px in meno. Un bordo trasparente pareggia senza cambiare l'aspetto. */
html body.nedate-ui-standard[class][class][class] :is(.btn, button.btn, a.btn,
  .btn-action, .btn-primary-custom, .contact-modern-submit, .tracking-login-submit):not(.btn-close) {
  border-width: var(--sw-field-bw) !important;
  border-style: solid !important;
}

/* --- La didascalia di una checkbox e' testo, non una micro-etichetta ----- */
html body.nedate-ui-standard[class][class][class] .form-check-label {
  font-size: var(--sw-text-sm, 14px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--sw-body, var(--sw-ink)) !important;
}

/* =========================================================================
   27. MENU DI SELEZIONE PAESE
   -------------------------------------------------------------------------
   Misurato: il pannello non aveva ne' bordo ne' raggio — galleggiava staccato
   dal campo che lo apre — le voci erano a 13,1px (fuori dalla scala dei
   controlli) e il paese attivo non era distinguibile dagli altri.
   ========================================================================= */
html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .qq-city-dd) {
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--sw-field-bg) !important;
  border: var(--sw-field-bw) solid var(--sw-field-border) !important;
  /* il bordo superiore farebbe una doppia linea con quello inferiore del campo */
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: var(--sw-control-r) !important;
  border-bottom-right-radius: var(--sw-control-r) !important;
  box-shadow: var(--sw-shadow-md) !important;
  max-height: 288px !important;
  overflow-y: auto !important;
}

/* --- Zona di ricerca: una fascia, separata dall'elenco ------------------- */
html body.nedate-ui-standard[class][class][class] .country-search-wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px !important;
  background: var(--sw-field-bg) !important;
  border-bottom: var(--sw-field-bw) solid var(--sw-line) !important;
}
html body.nedate-ui-standard[class][class][class] .country-search {
  width: 100% !important;
  height: var(--sw-control-h-sm) !important;
  min-height: var(--sw-control-h-sm) !important;
  padding: 0 12px !important;
  font-size: var(--sw-control-fs) !important;
  border-radius: 8px !important;
}

/* --- Voci: altezza dei controlli piccoli, bandiera leggibile ------------- */
html body.nedate-ui-standard[class][class][class] :is(.log-dd-item, .qq-city-item) {
  min-height: var(--sw-control-h-sm) !important;
  padding: 8px 14px !important;
  color: var(--sw-ink) !important;
  font-size: var(--sw-control-fs) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  cursor: pointer;
  border: 0 !important;
  border-radius: 0 !important;
  transition: background var(--sw-dur-fast, .15s) var(--sw-ease, ease);
}
/* La voce paese e' composita — bandiera, nome, spunta — e sta su una riga flex.
   Quella citta' e' testo con dentro lo <span> della porzione trovata: messa in
   flex, il `gap` la spezzava a meta' e si leggeva "Cat  ania 95100". */
html body.nedate-ui-standard[class][class][class] .log-dd-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body.nedate-ui-standard[class][class][class] .qq-city-item {
  display: block !important;
  line-height: 1.5 !important;
}
html body.nedate-ui-standard[class][class][class] .log-dd-item .fi {
  flex: 0 0 auto;
  width: 20px !important;
  height: 14px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
html body.nedate-ui-standard[class][class][class] .log-dd-name { flex: 1 1 auto; min-width: 0; }

/* --- Stato attivo, passaggio del mouse, tastiera ------------------------- */
html body.nedate-ui-standard[class][class][class] .log-dd-check {
  flex: 0 0 auto;
  opacity: 0;
  color: var(--sw-brand-600) !important;
  font-size: 1rem;
}
html body.nedate-ui-standard[class][class][class] .log-dd-item.is-selected {
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50) !important;
}
html body.nedate-ui-standard[class][class][class] .log-dd-item.is-selected .log-dd-check { opacity: 1; }
html body.nedate-ui-standard[class][class][class] :is(.log-dd-item, .qq-city-item):is(:hover, :focus-visible) {
  background: var(--sw-brand-50) !important;
  color: var(--sw-brand-700) !important;
}

/* --- Ricerca senza esiti ------------------------------------------------- */
html body.nedate-ui-standard[class][class][class] .log-dd-empty {
  margin: 0 !important;
  padding: 18px 14px !important;
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-sm, 14px) !important;
  text-align: center;
}

/* La porzione che corrisponde a quanto digitato era in grassetto E sottolineata:
   sottolineare significa "link". Basta il peso, con il colore del brand. */
html body.nedate-ui-standard[class][class][class] .autocomplete-highlight {
  font-weight: var(--sw-weight-bold, 700) !important;
  text-decoration: none !important;
  color: var(--sw-brand-700) !important;
}
/* La riga attiva si segnala con la superficie, non ricolorando tutto il testo:
   se diventa rossa per intero, la porzione trovata smette di distinguersi. */
html body.nedate-ui-standard[class][class][class] .qq-city-item:is(.active, :hover, :focus-visible) {
  background: var(--sw-brand-50) !important;
}
/* Il CAP accompagna il nome: stessa riga, un gradino sotto. */
html body.nedate-ui-standard[class][class][class] .qq-city-zip {
  margin-left: .4rem;
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-sm, 14px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  font-variant-numeric: tabular-nums;
}
html body.nedate-ui-standard[class][class][class] :is(.qq-city-dd .p-2, .qq-city-dd .text-muted) {
  padding: 14px !important;
  font-size: var(--sw-text-sm, 14px) !important;
  color: var(--sw-muted) !important;
}

/* --- Giunzione campo/pannello -------------------------------------------
   Il pannello saliva 6px sopra il campo, coprendone il bordo inferiore mentre
   il campo teneva i suoi angoli arrotondati: si vedeva una scatola curva con
   un foglio incollato sotto. Aperto, il campo squadra gli angoli inferiori e i
   due condividono un bordo solo. */
html body.nedate-ui-standard[class][class][class] .country-select.qq-dd-open .log-select-btn,
html body.nedate-ui-standard[class][class][class] .country-select.qq-ac-open .log-city-field {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* Le due tendine condividono la classe .log-dropdown ma pendono da campi
   diversi: quella dei paesi dalla riga paese (alta --wmq-h), quella delle
   citta' dal fondo del gruppo. Un `top: 100%` unico le sbagliava entrambe. */
html body.nedate-ui-standard[class][class][class] .log-dropdown:not(.qq-city-dd) {
  top: var(--wmq-h, 58px) !important;
  margin-top: -1px !important;
}
html body.nedate-ui-standard[class][class][class] .qq-city-dd {
  top: 100% !important;
  margin-top: -1px !important;
}

/* --- Stato vuoto: stesso trattamento nei due menu ------------------------
   Quello delle citta' usava classi Bootstrap generiche e restava allineato a
   sinistra come un'etichetta dimenticata. */
html body.nedate-ui-standard[class][class][class] :is(.log-dd-empty, .qq-city-dd > .city-list > .p-2, .qq-city-dd .p-2.text-muted, .qq-city-dd .p-2.text-danger) {
  margin: 0 !important;
  padding: 20px 14px !important;
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-sm, 14px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  text-align: center !important;
}
html body.nedate-ui-standard[class][class][class] .qq-city-dd .p-2.text-danger {
  color: var(--sw-danger, #dc3545) !important;
}

/* La riga attiva non tocca gli angoli arrotondati del pannello: il taglio
   avviene sull'overflow del contenitore, non sulla riga. */
html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .qq-city-dd) > :is(.dd-list, .city-list) {
  padding: 4px 0 !important;
}
/* Nel CAP la porzione trovata resta della taglia del CAP, non del nome. */
html body.nedate-ui-standard[class][class][class] .qq-city-zip .autocomplete-highlight {
  font-size: inherit !important;
  color: var(--sw-brand-700) !important;
}

/* =========================================================================
   28. UTILITY DI VISIBILITÀ
   -------------------------------------------------------------------------
   `.d-lg-none` di Bootstrap vale (0,1,0): qualunque regola di componente con
   due classi la batte. È il motivo per cui l'hamburger, marcato "solo mobile"
   nel markup, restava visibile anche su desktop — lo rimetteva in mostra
   `body.nedate-ui-standard .btn-icon-glass { display: inline-flex !important }`.
   Un'utility che dice "nascondi" deve vincere sul display di default di un
   componente, altrimenti non e' un'utility.
   ========================================================================= */
/* NON si ripristina `.d-none` generico: il pattern `.d-none .d-lg-flex`
   (nascosto su mobile, mostrato su desktop) e' usato dai link di navigazione e
   dai bottoni Accedi/Registrati, e alzando la specificita' di `.d-none` si
   batterebbe anche `.d-lg-flex`, cancellandoli dal desktop. Qui si alzano solo
   le utility "nascondi da questo breakpoint in su", che non hanno quel
   conflitto. */
@media (min-width: 576px)  { html body.nedate-ui-standard[class][class] .d-sm-none { display: none !important; } }
@media (min-width: 768px)  { html body.nedate-ui-standard[class][class] .d-md-none { display: none !important; } }
@media (min-width: 960px)  { html body.nedate-ui-standard[class][class] .d-lg-none { display: none !important; } }
@media (min-width: 1200px) { html body.nedate-ui-standard[class][class] .d-xl-none { display: none !important; } }

/* =========================================================================
   29. NAVBAR
   -------------------------------------------------------------------------
   Misurato: la barra era #070e1c in chiaro e #0b1526 in scuro — praticamente
   lo stesso colore. In dark si confondeva con il canvas (#070e1c) e smetteva
   di essere una superficie. I pulsanti usavano un idioma "vetro"
   (rgba(255,255,255,.06) su bordo rgba(255,255,255,.1)) che non esiste altrove
   nel sito, e "Registrati" cambiava variante fra i temi: pieno in chiaro,
   contorno fantasma in scuro — cioe' l'azione principale del sito si
   travestiva a seconda del tema.

   La barra scura in tema chiaro resta: e' l'ancora della pagina e il logo, un
   rosso #fc4f53, ci legge a 5,86:1 contro i 3,29:1 che avrebbe su bianco. Ma
   ora e' guidata da token, e in dark diventa --sw-surface, piu' chiara del
   canvas: la barra si stacca invece di sparirci dentro.
   ========================================================================= */
html body.nedate-ui-standard {
  --sw-nav-bg:    var(--sw-navy-950);
  --sw-nav-ink:   var(--sw-on-dark);
  --sw-nav-body:  rgba(244, 248, 253, .72);
  --sw-nav-line:  rgba(255, 255, 255, .10);
  --sw-nav-hover: rgba(255, 255, 255, .08);
  /* Il fondo della barra e' conteso da una catena di regole legacy, tutte pero'
     lette da token: puntarli qui vale piu' che rincorrerle a specificita'. */
  --theme-navbar-bg:          var(--sw-nav-bg);
  --nd-shell-navbar-bg:       var(--sw-nav-bg);
  --nd-final-navbar-pill-bg:  var(--sw-nav-bg);
}
html[data-theme="dark"] body.nedate-ui-standard,
html body.nedate-ui-standard.dark-mode {
  --sw-nav-bg:    var(--sw-surface);
  --sw-nav-line:  var(--sw-line-strong);
  --sw-nav-hover: var(--sw-surface-3, rgba(255, 255, 255, .08));
}

html body.nedate-ui-standard[class][class] .navbar-azure {
  background: var(--sw-nav-bg) !important;
  background-color: var(--sw-nav-bg) !important;
  border-bottom: 1px solid var(--sw-nav-line) !important;
  box-shadow: none !important;
}

/* --- Link: corpo, ink al passaggio, brand quando attivo ------------------ */
html body.nedate-ui-standard[class][class] .navbar-azure .nav-link-glass {
  padding: 8px 12px !important;
  color: var(--sw-nav-body) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--sw-control-r) !important;
  font-size: var(--sw-control-fs) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  transition: color var(--sw-dur-fast, .15s) var(--sw-ease, ease),
              background var(--sw-dur-fast, .15s) var(--sw-ease, ease);
}
html body.nedate-ui-standard[class][class] .navbar-azure .nav-link-glass:hover {
  color: var(--sw-nav-ink) !important;
  background: var(--sw-nav-hover) !important;
}
html body.nedate-ui-standard[class][class] .navbar-azure .nav-link-glass.is-active {
  color: var(--sw-nav-ink) !important;
  background: transparent !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}

/* --- Pulsanti icona: fantasma, non vetro -------------------------------- */
html body.nedate-ui-standard[class][class][class] .navbar-azure :is(.btn-icon-glass, .btn-user-glass) {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  color: var(--sw-nav-body) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--sw-control-r) !important;
}
html body.nedate-ui-standard[class][class][class] .navbar-azure :is(.btn-icon-glass, .btn-user-glass):hover {
  color: var(--sw-nav-ink) !important;
  background: var(--sw-nav-hover) !important;
}

/* --- Accedi: contorno. Registrati: pieno brand. In tutti e due i temi. --- */
html body.nedate-ui-standard[class][class][class] .navbar-azure .btn-auth-glass {
  min-height: var(--sw-control-h) !important;
  padding-inline: 18px !important;
  color: var(--sw-nav-ink) !important;
  background: transparent !important;
  border: 1px solid var(--sw-nav-line) !important;
  border-radius: var(--sw-control-r) !important;
  font-size: var(--sw-control-fs) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard[class][class][class] .navbar-azure .btn-auth-glass:hover {
  background: var(--sw-nav-hover) !important;
  border-color: var(--sw-nav-body) !important;
}
html body.nedate-ui-standard[class][class][class] .navbar-azure .btn-auth-glass:last-child,
html body.nedate-ui-standard[class][class][class] .navbar-azure a.btn-auth-glass[href*="register"] {
  color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard[class][class][class] .navbar-azure .btn-auth-glass:last-child:hover,
html body.nedate-ui-standard[class][class][class] .navbar-azure a.btn-auth-glass[href*="register"]:hover {
  background: var(--sw-brand-700) !important;
  border-color: var(--sw-brand-700) !important;
}

/* --- Cursore da tastiera nel menu paese ---------------------------------
   Il fuoco resta sul campo di ricerca mentre le frecce scorrono l'elenco:
   la riga sotto il cursore e' l'unico segnale che l'utente ha, quindi deve
   distinguersi sia dallo sfondo sia dalla riga gia' selezionata. */
html body.nedate-ui-standard[class][class][class] .log-dd-item.is-active {
  background: var(--sw-canvas) !important;
  box-shadow: inset 3px 0 0 var(--sw-brand-500) !important;
}
html body.nedate-ui-standard[class][class][class] .log-dd-item.is-selected.is-active {
  background: var(--sw-brand-50) !important;
}

/* =========================================================================
   30. CASSETTO MOBILE — ridisegno
   -------------------------------------------------------------------------
   Le piastrelle delle icone avevano un bordo di 1px: nel resto del sito le
   piastrelle icona non ne hanno (avatar della chat, icone delle funzionalita',
   tessere delle FAQ) — e su fondo scuro un bordo chiaro attorno a un quadrato
   scuro e' proprio il segno che datava il menu. La superficie del cassetto
   inoltre era navy fisso: ora segue il token della navbar, la barra da cui il
   menu esce, e con essa cambia tema.
   ========================================================================= */
html body.nedate-ui-standard[class][class] .drawer-sb {
  background: var(--sw-nav-bg, var(--sw-navy-950)) !important;
}
html body.nedate-ui-standard[class][class] .drawer-sb__header {
  border-bottom: 1px solid var(--sw-nav-line, rgba(255, 255, 255, .10)) !important;
}

/* Chiusura: fantasma come nella navbar, non un quadrato bordato */
html body.nedate-ui-standard[class][class] .drawer-sb__close {
  color: var(--sw-nav-body, rgba(244, 248, 253, .72)) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--sw-control-r, 10px) !important;
}
html body.nedate-ui-standard[class][class] .drawer-sb__close:hover,
html body.nedate-ui-standard[class][class] .drawer-sb__close:focus-visible {
  color: var(--sw-nav-ink, #fff) !important;
  background: var(--sw-nav-hover, rgba(255, 255, 255, .08)) !important;
}

/* --- Righe: piu' compatte, la lista respira lo stesso ------------------- */
html body.nedate-ui-standard[class][class] .drawer-sb .sb-link {
  gap: .875rem !important;
  min-height: 52px !important;
  margin-bottom: 2px !important;
  padding: .5rem .75rem !important;
  font-size: var(--sw-control-fs, 15px) !important;
}

/* --- Piastrella icona: superficie, nessun bordo ------------------------- */
html body.nedate-ui-standard[class][class] .drawer-sb .sb-link .main-icon {
  width: 40px !important;
  height: 40px !important;
  color: rgba(229, 238, 250, .68) !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 1.1rem !important;
}
html body.nedate-ui-standard[class][class] .drawer-sb .sb-link:hover .main-icon {
  color: var(--sw-nav-ink, #fff) !important;
  background: rgba(255, 255, 255, .12) !important;
}

/* --- Voce corrente: il segno sta nella piastrella e nel marcatore, non in
       una fascia rossa che pesa piu' della voce stessa. ------------------- */
html body.nedate-ui-standard[class][class] .drawer-sb .sb-link.active {
  background: rgba(240, 70, 81, .10) !important;
}
html body.nedate-ui-standard[class][class] .drawer-sb .sb-link.active .main-icon {
  color: var(--sw-brand-300) !important;
  background: rgba(240, 70, 81, .20) !important;
  border: 0 !important;
}

/* --- Le due azioni del cassetto ------------------------------------------
   `.drawer-sb__cta` e' un <a> che non ha "btn" nel nome classe: in tema scuro
   la regola che ricolora i link lo dipingeva rosa chiaro, e "Inizia gratis"
   finiva a 1,59:1 sul proprio riempimento — il pulsante principale del menu
   mobile, illeggibile. Stesso caso gia' corretto sul CTA dell'hero. */
html body.nedate-ui-standard[class][class][class][class] a.drawer-sb__cta,
html body.nedate-ui-standard[class][class][class][class] a.drawer-sb__cta :is(span, strong, i) {
  color: var(--sw-nav-ink, #fff) !important;
  -webkit-text-fill-color: var(--sw-nav-ink, #fff) !important;
}
html body.nedate-ui-standard[class][class][class][class] a.drawer-sb__cta--primary,
html body.nedate-ui-standard[class][class][class][class] a.drawer-sb__cta--primary :is(span, strong, i) {
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
}

/* =========================================================================
   31. PANNELLO RISULTATO PREVENTIVO  (#qq-result)
   -------------------------------------------------------------------------
   Componente mai visto in tutta la sessione: sta dentro la card dell'hero
   ma nasce con `d-none` e appare solo dopo il calcolo, quindi nessun audit
   automatico lo aveva mai attraversato. Nel markup era ancora fatto di sole
   utility Bootstrap (`bg-light border rounded-3 text-center`), con la stessa
   patologia gia' corretta altrove: il numero che l'utente sta cercando —
   il prezzo — era l'elemento tipograficamente piu' debole del pannello,
   piu' piccolo delle tre righe di confronto sotto di lui.
   Qui il prezzo torna a essere la voce principale e il resto lo sostiene.
   ========================================================================= */

html body.nedate-ui-standard[class][class][class] #qq-result.qq-result {
  margin-top: 18px !important;
  padding: 20px !important;
  border-radius: var(--sw-radius-md, 14px) !important;
  background: var(--sw-surface-2) !important;
  border: 1px solid var(--sw-line) !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* --- Testata: prezzo + corriere ----------------------------------------- */
html body.nedate-ui-standard[class][class][class] #qq-result .qq-price-heading {
  margin: 0 0 2px !important;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-variant-numeric: tabular-nums;
}
html body.nedate-ui-standard[class][class][class] #qq-result .qq-courier-line {
  display: block !important;
  margin: 0 !important;
  font-size: var(--sw-text-xs, .8125rem) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}

/* --- Confronto tariffe --------------------------------------------------- */
html body.nedate-ui-standard[class][class][class] #qq-rates-list {
  margin-top: 16px !important;
  padding-top: 4px !important;
  border-top: 1px solid var(--sw-line) !important;
  text-align: left !important;
}
html body.nedate-ui-standard[class][class][class] .qq-rate-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 0 !important;
}
/* era `1.5px dashed`: un tratteggio pesa quanto il contenuto che separa */
html body.nedate-ui-standard[class][class][class] .qq-rate-sep {
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard[class][class][class] .qq-rate-main {
  min-width: 0;
  flex: 1 1 auto;
}
html body.nedate-ui-standard[class][class][class] .qq-rate-name {
  display: block !important;
  font-size: var(--sw-text-sm, .9375rem) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.35 !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.nedate-ui-standard[class][class][class] .qq-rate-sub {
  display: block !important;
  font-size: var(--sw-text-xs, .8125rem) !important;
  font-weight: var(--sw-weight-normal, 400) !important;
  line-height: 1.4 !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.nedate-ui-standard[class][class][class] .qq-rate-side {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto;
}
html body.nedate-ui-standard[class][class][class] .qq-rate-price {
  font-size: var(--sw-text-sm, .9375rem) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-variant-numeric: tabular-nums;
}
/* Era `badge badge-delivered`: il verde qui significa "consegnato" nel
   tracking, non "piu' conveniente". Il segnale e' di marca, non di stato. */
html body.nedate-ui-standard[class][class][class] .qq-rate-best {
  display: inline-flex !important;
  /* il monospazio e' la voce dei dati (importi, codici): "MIGLIORE" e'
     un'etichetta, quindi torna al carattere dell'interfaccia */
  font-family: var(--sw-font-body) !important;
  align-items: center !important;
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: var(--sw-brand-50) !important;
  color: var(--sw-brand-700) !important;
  -webkit-text-fill-color: var(--sw-brand-700) !important;
  font-size: .6875rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

/* --- Errore -------------------------------------------------------------- */
html body.nedate-ui-standard[class][class][class] #qq-result .qq-error {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--sw-danger) !important;
  border-radius: var(--sw-radius-sm, 10px) !important;
  background: var(--sw-danger-bg) !important;
  color: var(--sw-danger) !important;
  -webkit-text-fill-color: var(--sw-danger) !important;
  font-size: var(--sw-text-xs, .8125rem) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* --- Passo successivo ---------------------------------------------------- */
html body.nedate-ui-standard[class][class][class] #qq-continue-btn.qq-continue {
  margin-top: 16px !important;
  width: 100% !important;
  border-radius: var(--sw-control-r, 12px) !important;
}
@media (min-width: 576px) {
  html body.nedate-ui-standard[class][class][class] #qq-continue-btn.qq-continue {
    width: auto !important;
    min-width: 220px !important;
  }
}

/* =========================================================================
   32. SELETTORE LINGUA NEL PIE' DI PAGINA
   -------------------------------------------------------------------------
   Altro componente chiuso: il menu vive dentro un <details> e nessuno lo
   aveva mai aperto. Il pannello era #111827 su un pie' di pagina #0f172a —
   1,03:1 di stacco: un pannello sovrapposto piu' scuro dello sfondo su cui
   galleggia si legge come un buco, non come un livello. La lingua attiva
   era una placca bordeaux con testo rosso, cioe' il linguaggio visivo di
   un errore usato per dire "selezionato".
   Il pie' di pagina resta scuro in entrambi i temi, quindi anche il menu.
   ========================================================================= */

html body.nedate-ui-standard[class][class][class] footer.nedate-site-footer .nedate-footer-language-menu {
  min-width: max(100%, 160px) !important;
  padding: 6px !important;
  border: 1px solid rgba(226, 232, 240, .34) !important;
  border-radius: var(--sw-radius-sm, 10px) !important;
  background: var(--sw-navy-700, #1e3a5a) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .48) !important;
  gap: 2px !important;
}
html body.nedate-ui-standard[class][class][class] footer.nedate-site-footer .nedate-footer-language-option {
  min-height: 36px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  font-size: var(--sw-text-xs, .8125rem) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  transition: background var(--sw-dur-fast, .15s) var(--sw-ease, ease);
}
html body.nedate-ui-standard[class][class][class] footer.nedate-site-footer .nedate-footer-language-option:hover,
html body.nedate-ui-standard[class][class][class] footer.nedate-site-footer .nedate-footer-language-option:focus-visible {
  background: rgba(255, 255, 255, .09) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body.nedate-ui-standard[class][class][class] footer.nedate-site-footer .nedate-footer-language-option.is-active {
  background: rgba(255, 255, 255, .13) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
/* La spunta dice "questa" senza dover colorare tutta la riga. */
html body.nedate-ui-standard[class][class][class] footer.nedate-site-footer .nedate-footer-language-option.is-active::after {
  content: "\2713";
  margin-left: auto !important;
  color: var(--sw-brand-300, #ffa1a6) !important;
  -webkit-text-fill-color: var(--sw-brand-300, #ffa1a6) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
}

/* =========================================================================
   33. STATO DI ERRORE DEI CONTROLLI  (.is-invalid)
   -------------------------------------------------------------------------
   Terzo componente mai renderizzato: la validazione. Le regole dei campi
   scritte nelle sezioni 24 e 26 impongono `border-color` con !important a
   specificita' alta, e finivano per vincere anche sopra `.is-invalid` di
   Bootstrap: il messaggio rosso compariva sotto il campo, ma il campo
   restava identico a tutti gli altri. In un modulo lungo questo significa
   leggere l'errore e non sapere dove sia.
   Il segnale non e' affidato al solo colore: bordo + icona del campo +
   etichetta + un glifo nel messaggio.
   ========================================================================= */

html body.nedate-ui-standard[class][class][class][class] :is(input, select, textarea).is-invalid,
html body.nedate-ui-standard[class][class][class][class] :is(input, select, textarea)[aria-invalid="true"],
html body.nedate-ui-standard[class][class][class][class] .was-validated :is(input, select, textarea):invalid {
  /* La regola che vince davvero sul bordo dei campi sta in nedate-unified.css
     con `html:not(#_):not(#__) …`, cioe' due id di specificita': impossibile
     da battere con `border-color`. Pero' quella regola legge un token —
     `var(--sw-field-border)` — e i token si ereditano: ridichiarandolo qui,
     sull'elemento stesso, e' la regola nucleare a dipingere di rosso. */
  --sw-field-border: var(--sw-danger);
  /* Le famiglie legacy leggono token propri, e in tema scuro vince
     `--nd-final-field-border`: li si ridichiarano tutti sull'elemento. */
  --nd-final-field-border: var(--sw-danger);
  --nd-control-border: var(--sw-danger);
  --nd-form-border: var(--sw-danger);
  --nd-form-standard-border: var(--sw-danger);
  --wb-line-strong: var(--sw-danger);
  --spedire-border: var(--sw-danger);
  --border-color: var(--sw-danger);
  --nd-form-modern-border: var(--sw-danger);
  --nd-form-modern-invalid: var(--sw-danger);
  border-color: var(--sw-danger) !important;
  /* Bootstrap infila un SVG dentro il campo: si sovrappone all'icona
     dell'occhio della password e alla freccia delle select */
  background-image: none !important;
  padding-right: var(--sw-control-px, 14px) !important;
}
html body.nedate-ui-standard[class][class][class][class] :is(input, select, textarea).is-invalid:focus,
html body.nedate-ui-standard[class][class][class][class] :is(input, select, textarea)[aria-invalid="true"]:focus {
  border-color: var(--sw-danger) !important;
  box-shadow: 0 0 0 3px var(--sw-danger-ring) !important;
  outline: none !important;
}

/* L'involucro con icona e etichetta flottante: il campo e' dentro, quindi
   il segnale va portato anche sui suoi fratelli. */
html body.nedate-ui-standard[class][class][class][class] :is(.login-page__input-wrap, .form-floating, .input-group, .log-input-group):has(.is-invalid) :is(.login-page__input-icon, .log-input-icon, .input-group-text) {
  color: var(--sw-danger) !important;
  -webkit-text-fill-color: var(--sw-danger) !important;
}
html body.nedate-ui-standard[class][class][class][class] :is(.login-page__input-wrap, .form-floating):has(.is-invalid) > label {
  color: var(--sw-danger) !important;
  -webkit-text-fill-color: var(--sw-danger) !important;
}

/* --- Il messaggio -------------------------------------------------------- */
/* Nessuna regola su `display`: in Bootstrap il messaggio e' nascosto finche'
   non c'e' errore, e forzarlo qui lo farebbe comparire sempre. */
html body.nedate-ui-standard[class][class][class][class] .invalid-feedback {
  margin-top: 6px !important;
  font-size: var(--sw-text-xs, .8125rem) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.45 !important;
  color: var(--sw-danger) !important;
  -webkit-text-fill-color: var(--sw-danger) !important;
}
/* Un cerchio con il punto esclamativo: forma, non solo colore (WCAG 1.4.1) */
html body.nedate-ui-standard[class][class][class][class] .invalid-feedback::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  border-radius: 50%;
  background: var(--sw-danger);
  color: var(--sw-field-bg, #fff);
  -webkit-text-fill-color: var(--sw-field-bg, #fff);
  font-family: var(--sw-font-body);
  font-size: 10px;
  font-weight: var(--sw-weight-bold, 700);
  line-height: 1;
}

/* =========================================================================
   34. FUOCO DEI CAMPI — l'alone rosa non bastava
   -------------------------------------------------------------------------
   Misurato sui pixel: in tema chiaro il campo con il fuoco riceveva solo un
   alone rosa chiarissimo, rgb(249,222,225) su bianco = 1,22:1. La WCAG
   1.4.11 chiede 3:1 per un indicatore di interfaccia: chi naviga da tastiera
   su uno schermo luminoso non vede dove si trova. In tema scuro invece il
   bordo diventava gia' #f0525f (5,14:1) e si vedeva benissimo — la stessa
   soluzione, portata anche di giorno.
   Il bordo passa al colore di marca; l'alone resta come indizio secondario.
   I campi in errore sono esclusi: li' il rosso di errore deve restare.
   ========================================================================= */

html body.nedate-ui-standard[class][class][class][class] :is(input, select, textarea):focus:not(.is-invalid):not([aria-invalid="true"]),
/* NON `.log-input-group` da solo: quel contenitore avvolge paese e citta'
   insieme, e accenderlo col fuoco riaccende entrambi i campi — lo stesso
   difetto del bordo che "univa i 2 campi", gia' corretto nella sezione 26.
   Le varianti che invece **sono** un campo solo ci stanno: peso e le tre
   misure del preventivo in home, e i gruppi con l'unita' attaccata di
   /spedizioni. Senza, il bordo restava grigio col cursore dentro mentre i
   campi accanto diventavano rossi — alla luce sulla home, al buio su
   /spedizioni (misurati tutti e due). */
html body.nedate-ui-standard[class][class][class][class] :is(.log-select-btn, .log-city-field, .qq-weight-field, .qq-dim-field, .ship-dim-input-group, .nd-input-addon-group):focus-within {
  --sw-field-border: var(--sw-brand-600);
  --nd-final-field-border: var(--sw-brand-600);
  --nd-control-border: var(--sw-brand-600);
  --nd-form-border: var(--sw-brand-600);
  --nd-form-standard-border: var(--sw-brand-600);
  --wb-line-strong: var(--sw-brand-600);
  --spedire-border: var(--sw-brand-600);
  --border-color: var(--sw-brand-600);
  --nd-form-modern-border: var(--sw-brand-600);
  border-color: var(--sw-brand-600) !important;
  /* `--sw-focus-ring` E' GIA' un'ombra completa (`0 0 0 3px rgba(...)`),
     non un colore: riscriverla dentro `0 0 0 3px var(...)` produceva
     `0 0 0 3px 0 0 0 3px rgba(...)`, dichiarazione non valida e quindi
     buttata via dal browser. Misurato su /register: il campo col fuoco
     dava `box-shadow: oklab(0 0 0 / 0) 0px 0px 0px 0px`, cioe' nessun
     anello visibile. */
  box-shadow: var(--sw-focus-ring) !important;
  outline: none !important;
}

/* =========================================================================
   35. PULSANTE "REGISTRATI" NELLA NAVBAR — inchiostro su marca in tema scuro
   -------------------------------------------------------------------------
   Misurato sui pixel: bianco su #f0525f = 3,46:1, sotto il 4,5:1 richiesto
   per un testo da 15px/600. E' lo stesso caso gia' risolto per le CTA con
   `--sw-on-brand`: in tema scuro il rosso di marca viene schiarito per
   reggere come superficie, e allora il testo sopra deve tornare scuro.
   La regola della sezione 29 lo dichiarava gia', ma perdeva il dipinto:
   qualcuno piu' in basso nella cascata impone `-webkit-text-fill-color`,
   che vince su `color`. Va dichiarato anche quello, come per il cassetto.
   ========================================================================= */

html body.nedate-ui-standard[class][class][class][class] .navbar-azure a.btn-auth-glass:last-child,
html body.nedate-ui-standard[class][class][class][class] .navbar-azure a.btn-auth-glass[href*="register"],
html body.nedate-ui-standard[class][class][class][class] .navbar-azure a.btn-auth-glass:last-child :is(i, span),
html body.nedate-ui-standard[class][class][class][class] .navbar-azure a.btn-auth-glass[href*="register"] :is(i, span) {
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
}

/* =========================================================================
   36. RIFINITURE DALL'ULTIMA SCANSIONE
   -------------------------------------------------------------------------
   Misurato sulle pagine renderizzate, non letto nei file.
   ========================================================================= */

/* --- Le intestazioni del pie' di pagina erano il testo piu' piccolo del sito
   Le avevo scritte io a `.6875rem` pensando "11px": con `html` a 14px
   dipingono a 9,6 — un titolo di colonna piu' piccolo della sua didascalia.
   Qui vanno in px, cosi' la radice non le puo' restringere. */
html body.nedate-ui-standard[class][class] .nedate-footer-column :is(h6, .nedate-footer-heading),
html body.nedate-ui-standard[class][class] .nedate-footer-newsletter :is(h6, .nedate-footer-heading) {
  font-size: 12px !important;
  letter-spacing: .08em !important;
}

/* --- Bersagli del pie' di pagina (WCAG 2.5.8) ----------------------------
   I link erano scatole da 18px con 8px di spazio: su un telefono si sbaglia.
   24px di altezza minima, e lo spazio fra le righe si riduce di conseguenza. */
html body.nedate-ui-standard[class][class] .nedate-footer-column { gap: .25rem !important; }
html body.nedate-ui-standard[class][class] .nedate-footer-column a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  min-width: 24px !important;
}

/* --- `bolder` non e' 700 -------------------------------------------------
   `<strong>` e `<b>` hanno `font-weight: bolder` dall'agente utente: dentro
   un contenitore gia' a 700 il calcolo relativo arriva a 900, e i caratteri
   si fermano a 700 — il browser lo falsifica sbavando i contorni. */
html body.nedate-ui-standard :is(strong, b) {
  font-weight: var(--sw-weight-max, 700);
}

/* =========================================================================
   37. IL FONDO DELLA SCALA, E IL GRIGIO CHE NON ATTENUAVA
   ========================================================================= */

/* Il testo sotto i 12px rimasto (`small`, `strong`, `span` a 9,5-10,9px) sta
   quasi tutto dentro le card finte che illustrano il prodotto — timbri, orari,
   stati di una spedizione disegnata. Li' il corpo piccolo e' il disegno, non
   un difetto, e alzarlo romperebbe la scala interna di quelle illustrazioni.
   Lasciato dov'e', deliberatamente. */
/* La pillola dello sconto e' un numero, e stava a 9,5px */
html body.nedate-ui-standard[class][class][class] :is(.pricing-modern-save-badge, .badge-save, .save-badge) {
  font-size: 12px !important;
}

/* --- `.text-muted` non attenuava niente --------------------------------
   Dipingeva #46566d, cioe' esattamente il colore del testo normale: la
   gerarchia che il markup chiede scrivendo "muted" andava persa. A vincere
   e' una regola con `html:not(#_):not(#__)` — due id — che legge
   `--sw-ink-body`; la si batte solo alla pari, con lo stesso numero di id. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] :is(.text-muted, .text-secondary) {
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}

/* =========================================================================
   38. FASCIA DEI CANALI DI VENDITA
   -------------------------------------------------------------------------
   Fra la CTA finale e il pie' di pagina restava una fascia bianca vuota: la
   pagina smetteva di parlare prima di finire il discorso. In cima la pagina
   dice con quali corrieri spedisce; qui dice da dove arrivano gli ordini, e
   il giro si chiude. Sta sulla stessa superficie del pie' di pagina cosi'
   la chiusura e' un blocco solo, non due strisce separate da un taglio.
   ========================================================================= */

html body.nedate-ui-standard .welcome-modern-channels {
  padding: clamp(2.75rem, 2rem + 2.4vw, 4.25rem) 0;
  background: var(--sw-surface-2);
  /* niente filo in cima: sopra c'e' la fascia scura della chiamata all'azione
     e una riga chiara li' sarebbe una cucitura, non un confine */
  border-top: 0;
}
html body.nedate-ui-standard .welcome-modern-channels-head {
  max-width: 46rem;
  margin: 0 auto clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  text-align: center;
}
html body.nedate-ui-standard .welcome-modern-channels-head h2 {
  margin: .75rem 0 .5rem;
  font-family: var(--sw-font-display);
  font-size: var(--sw-text-h3);
  font-weight: var(--sw-weight-bold, 700);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--sw-ink);
}
html body.nedate-ui-standard .welcome-modern-channels-head p {
  margin: 0;
  font-size: var(--sw-text-lead);
  line-height: 1.6;
  color: var(--sw-muted);
}

/* --- I nomi ------------------------------------------------------------
   Nessun elenco puntato: sono targhe, non voci di lista. */
html body.nedate-ui-standard .welcome-modern-channels-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  /* larghezza contenuta: a tutta pagina i tredici nomi andavano a capo
     11 + 2, con una riga orfana in fondo */
  max-width: 52rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
html body.nedate-ui-standard .welcome-modern-channels-grid > li {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--sw-line);
  border-radius: 999px;
  background: var(--sw-surface);
  color: var(--sw-ink);
  font-family: var(--sw-font-body);
  font-size: var(--sw-text-sm, .9375rem);
  font-weight: var(--sw-weight-semi, 600);
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  html body.nedate-ui-standard .welcome-modern-channels-grid { gap: 8px; }
  html body.nedate-ui-standard .welcome-modern-channels-grid > li {
    min-height: 36px;
    padding: 0 14px;
    font-size: var(--sw-text-xs);
  }
}

/* La fascia chiude la pagina, quindi il respiro finale e' suo: il
   contenitore aveva 2,4rem di padding sotto, e fra la fascia e il pie' di
   pagina restava la stessa striscia bianca di prima, solo piu' in basso. */
html body.nedate-ui-standard .welcome-modern-page:has(.welcome-modern-channels) {
  padding-bottom: 0 !important;
}

/* =========================================================================
   39. HOME SOTTO L'HERO — SCHEDE FUNZIONALITA' E FASCIA NUMERI
   -------------------------------------------------------------------------
   Il blocco arrivava pallido: schede bianche su fondo quasi bianco, icone
   rosa al 10% dentro riquadri rosa al 6%, e quattro varianti di colore
   (`is-green`, `is-orange`, `is-blue`, `is-purple`) che la cascata aveva
   gia' appiattito tutte sullo stesso rosa slavato — un arcobaleno morto.
   Una sola famiglia di icone, di linea, con contrasto vero.
   ========================================================================= */

html body.nedate-ui-standard .welcome-modern-body-section {
  background: var(--sw-surface);
}
html body.nedate-ui-standard .welcome-modern-body-section .welcome-modern-section-lead {
  max-width: 42rem;
  margin: 0 auto;
  font-size: var(--sw-text-lead);
  line-height: 1.6;
  color: var(--sw-muted);
}
html body.nedate-ui-standard .welcome-modern-body-section h2 {
  margin: .75rem 0 1rem;
  font-family: var(--sw-font-display);
  font-size: var(--sw-text-h2);
  font-weight: var(--sw-weight-bold, 700);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--sw-ink);
}

/* --- Schede alla stessa altezza ------------------------------------------
   Erano di altezze diverse dentro la stessa riga: i bordi inferiori non
   tornavano mai, e la griglia sembrava sfilacciata. */
html body.nedate-ui-standard .welcome-modern-body-section .row > [class*="col-"] {
  display: flex;
}
/* La scheda era `display:grid` con `44px 1fr`: icona e titolo finivano
   affiancati sulla stessa riga e il testo sotto andava a capo su due colonne
   diverse. Qui torna una colonna sola, con l'icona in cima. */
html body.nedate-ui-standard[class][class][class] .feature-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  flex: 1 1 auto;
  gap: 6px !important;
  padding: 24px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-md, 14px) !important;
  background: var(--sw-surface) !important;
  box-shadow: none !important;
  transition: border-color var(--sw-dur-fast, .15s) var(--sw-ease, ease),
              transform var(--sw-dur-fast, .15s) var(--sw-ease, ease),
              box-shadow var(--sw-dur-fast, .15s) var(--sw-ease, ease);
}
html body.nedate-ui-standard[class][class][class] .feature-card:hover {
  border-color: var(--sw-brand-200, #ffc9cc) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(12, 23, 41, .08) !important;
}
html body.nedate-ui-standard[class][class][class] .feature-card h3 {
  margin: 10px 0 0 !important;
  font-family: var(--sw-font-body) !important;
  font-size: 1.0625rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.35 !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}
html body.nedate-ui-standard[class][class][class] .feature-card p {
  margin: 0 !important;
  font-size: var(--sw-text-sm, .9375rem) !important;
  line-height: 1.55 !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}

/* --- L'icona ------------------------------------------------------------- */
html body.nedate-ui-standard[class][class][class] .feature-card .feature-icon,
html body.nedate-ui-standard[class][class][class] .feature-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  /* la regola legacy le lasciava 1,5rem sotto: fra icona e titolo si apriva
     un vuoto piu' grande dello spazio fra titolo e testo */
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  /* la velatura al 6% su una scheda bianca non si vedeva: pieno di marca,
     lo stesso trattamento dei pulsanti principali */
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
html body.nedate-ui-standard[class][class][class] .feature-icon > i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: inherit !important;
}

/* --- Fascia dei numeri ---------------------------------------------------
   Era una scheda bianca su fondo bianco con quattro celle senza confine:
   i numeri galleggiavano. Ora e' una fascia con superficie propria e
   divisori sottili, e i numeri hanno il peso della scala display. */
html body.nedate-ui-standard .welcome-modern-stats-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem) !important;
  padding: 0 !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-lg, 18px) !important;
  background: var(--sw-surface-2) !important;
  box-shadow: none !important;
  overflow: hidden;
}
html body.nedate-ui-standard .welcome-modern-stats-strip > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding: 22px 24px !important;
  border-left: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .welcome-modern-stats-strip > div:first-child {
  border-left: 0 !important;
}
/* Nella fascia l'icona resta un glifo: un secondo muro di riquadri rossi
   dopo le otto schede sarebbe stato rumore, e la velatura chiara sparisce
   comunque su una superficie gia' velata. */
html body.nedate-ui-standard[class][class][class] .welcome-modern-stats-strip > div > i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
html body.nedate-ui-standard .welcome-modern-stats-strip > div > strong {
  font-family: var(--sw-font-display) !important;
  font-size: var(--sw-text-h3) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-variant-numeric: tabular-nums;
}
html body.nedate-ui-standard .welcome-modern-stats-strip > div > span {
  font-size: var(--sw-text-xs) !important;
  line-height: 1.45 !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard .welcome-modern-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body.nedate-ui-standard .welcome-modern-stats-strip > div:nth-child(odd) {
    border-left: 0 !important;
  }
  html body.nedate-ui-standard .welcome-modern-stats-strip > div:nth-child(n + 3) {
    border-top: 1px solid var(--sw-line) !important;
  }
}

/* =========================================================================
   40. FASCIA "COME FUNZIONA" — PASSI E ANTEPRIMA DI TRACCIAMENTO
   -------------------------------------------------------------------------
   I tre passi avevano icone al 12% di opacita' su fondo scuro: si vedeva il
   riquadro, non il simbolo. E i passi stavano uno sotto l'altro senza niente
   che dicesse "sono in sequenza" — la promessa del titolo ("in tre passaggi")
   non era visibile nella forma.
   ========================================================================= */

html body.nedate-ui-standard[class][class][class] .welcome-modern-steps {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin-top: clamp(1.5rem, 1.2rem + .8vw, 2.25rem) !important;
}
/* A griglia e non a flex: con flex, titolo e descrizione finivano affiancati
   sulla stessa riga invece di impilarsi accanto all'icona. */
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps > div {
  position: relative;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  column-gap: 16px !important;
  row-gap: 2px !important;
  align-items: start !important;
  padding: 0 0 22px !important;
  text-align: left !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps > div > i { grid-area: 1 / 1 / span 2 / 2; }
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps > div > strong { grid-area: 1 / 2 / 2 / 3; }
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps > div > span { grid-area: 2 / 2 / 3 / 3; }
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps > div:last-child {
  padding-bottom: 0 !important;
}
/* Il binario che tiene insieme la sequenza */
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps > div:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 52px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, .02));
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps > div > i {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: var(--sw-brand-300) !important;
  -webkit-text-fill-color: var(--sw-brand-300) !important;
  font-size: 20px !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps strong {
  display: block !important;
  margin: 4px 0 4px !important;
  font-size: 1.0625rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.3 !important;
  color: var(--sw-on-dark) !important;
  -webkit-text-fill-color: var(--sw-on-dark) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps span {
  display: block !important;
  font-size: var(--sw-text-sm, .9375rem) !important;
  line-height: 1.55 !important;
  color: var(--sw-on-dark-muted) !important;
  -webkit-text-fill-color: var(--sw-on-dark-muted) !important;
}
/* Il numero resta, ma agganciato al riquadro invece che sospeso */
html body.nedate-ui-standard[class][class][class] .welcome-modern-steps > div::before {
  position: absolute !important;
  left: 34px !important;
  top: -6px !important;
  z-index: 2;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  font-size: 11px !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1 !important;
  box-shadow: 0 0 0 3px var(--sw-navy-900, #0c1729);
}

/* --- L'anteprima di tracciamento ----------------------------------------
   E' il finto pannello del prodotto: resta chiaro su fondo scuro, ma il suo
   testo stava fra 9,5 e 10,9px — troppo piccolo perfino per un mock in una
   pagina di vendita. E i pallini della sequenza erano verdi: nel tracking
   vero il verde vuol dire "consegnato", non "passo". */
html body.nedate-ui-standard[class][class][class] .welcome-modern-timeline b {
  font-size: var(--sw-text-xs) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-timeline small {
  font-size: 12px !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-preview-grid strong {
  font-size: var(--sw-text-xs) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-preview-grid :is(p, b, a) {
  font-size: var(--sw-text-xs) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-tracking-preview > span {
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-tracking-preview > h3 {
  font-size: 1.125rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}

/* La sequenza dell'anteprima era verde acqua: nel prodotto vero il verde
   dice "consegnato". Qui i pallini sono passi, non stati. */
/* Nel mock la spedizione e' consegnata: il percorso e' tutto compiuto, e la
   linea lo dice con il colore di marca invece del grigio "non ancora". */
html body.nedate-ui-standard[class][class][class] .welcome-modern-timeline::before,
html body.nedate-ui-standard[class][class][class] .welcome-modern-timeline::after {
  background: var(--sw-brand-200, #ffc9cc) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-timeline > i::before,
html body.nedate-ui-standard[class][class][class] .welcome-modern-timeline > i::after {
  border-color: var(--sw-brand-600) !important;
  background: var(--sw-surface) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-timeline > i:last-child::before,
html body.nedate-ui-standard[class][class][class] .welcome-modern-timeline > i:last-child::after {
  background: var(--sw-brand-600) !important;
}


/* =========================================================================
   41. STRISCIA FAQ E FASCIA DI CHIUSURA
   -------------------------------------------------------------------------
   Le quattro domande stavano in fila su una riga sola: pillole basse, testo
   a 12px, freccia schiacciata contro il bordo. Erano link travestiti da
   bottoni, tutti uguali e tutti compressi. Qui diventano righe vere su due
   colonne, con lo spazio per leggerle.
   ========================================================================= */

html body.nedate-ui-standard[class][class] .welcome-modern-faq-strip {
  padding: clamp(2.75rem, 2rem + 2.4vw, 4.5rem) 0;
  background: var(--sw-surface-2);
  border-top: 1px solid var(--sw-line);
}
html body.nedate-ui-standard[class][class] .welcome-modern-faq-head h2 {
  margin: .75rem 0 0;
  font-family: var(--sw-font-display);
  font-size: var(--sw-text-h3);
  font-weight: var(--sw-weight-bold, 700);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--sw-ink);
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-faq-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-faq-grid > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 60px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-md, 14px) !important;
  background: var(--sw-surface) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: var(--sw-text-sm, .9375rem) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: border-color var(--sw-dur-fast, .15s) var(--sw-ease, ease),
              background var(--sw-dur-fast, .15s) var(--sw-ease, ease);
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-faq-grid > a:hover,
html body.nedate-ui-standard[class][class][class] .welcome-modern-faq-grid > a:focus-visible {
  border-color: var(--sw-brand-600) !important;
  background: var(--sw-brand-50) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-faq-grid > a > i {
  flex: 0 0 auto;
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
  font-size: 18px !important;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard[class][class][class] .welcome-modern-faq-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --- La fascia finale ----------------------------------------------------
   Il razzo stava solo, spinto contro il bordo sinistro, a mezzo schermo di
   distanza dal titolo che avrebbe dovuto accompagnare. Qui la chiusura si
   compone in colonna, centrata: simbolo, promessa, azione. */
html body.nedate-ui-standard[class][class][class] .welcome-modern-cta-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-align: center !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-cta-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 0 14px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: var(--sw-brand-300) !important;
  -webkit-text-fill-color: var(--sw-brand-300) !important;
  font-size: 24px !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-cta h2 {
  margin: 0 0 .5rem !important;
  font-family: var(--sw-font-display) !important;
  font-size: var(--sw-text-h2) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: var(--sw-on-dark) !important;
  -webkit-text-fill-color: var(--sw-on-dark) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-cta p {
  max-width: 40rem !important;
  margin: 0 auto !important;
  font-size: var(--sw-text-lead) !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
  color: var(--sw-on-dark-muted) !important;
  -webkit-text-fill-color: var(--sw-on-dark-muted) !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-cta-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 22px !important;
}
html body.nedate-ui-standard[class][class][class] .welcome-modern-cta-actions > small {
  font-size: var(--sw-text-xs) !important;
  color: var(--sw-on-dark-muted) !important;
  -webkit-text-fill-color: var(--sw-on-dark-muted) !important;
}

/* =========================================================================
   42. SEZIONE TARIFFE
   -------------------------------------------------------------------------
   Nella stessa sezione convivevano due spunte diverse: a sinistra un
   cerchietto rosa slavato, a destra un cerchio verde pieno — e il verde, in
   tutto il resto del sito, vuol dire "consegnato". Due segni per la stessa
   cosa, di cui uno preso in prestito da un altro significato.
   ========================================================================= */

html body.nedate-ui-standard[class][class][class] .pricing-features li > i,
html body.nedate-ui-standard[class][class][class] .welcome-modern-pricing-points li > i {
  flex: 0 0 auto;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
html body.nedate-ui-standard[class][class][class] .pricing-features li,
html body.nedate-ui-standard[class][class][class] .welcome-modern-pricing-points li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
html body.nedate-ui-standard[class][class][class] .pricing-features li > span {
  font-size: var(--sw-text-sm, .9375rem) !important;
  line-height: 1.5 !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}

/* --- Mensile / Annuale ---------------------------------------------------
   La voce non scelta era grigia su grigio: sembrava disattivata, non
   "l'altra opzione". Un interruttore deve mostrare due strade percorribili. */
html body.nedate-ui-standard[class][class][class] .billing-toggle {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 999px !important;
  background: var(--sw-surface-2) !important;
}
html body.nedate-ui-standard[class][class][class] .billing-btn {
  min-height: 34px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: var(--sw-text-xs) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  opacity: 1 !important;
  cursor: pointer;
}
html body.nedate-ui-standard[class][class][class] .billing-btn:hover {
  background: var(--sw-surface-3) !important;
}
html body.nedate-ui-standard[class][class][class] .billing-btn.active {
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  box-shadow: none !important;
}

/* --- La scheda del piano -------------------------------------------------
   E' l'offerta: era una scheda bianca uguale a tutte le altre. */
html body.nedate-ui-standard[class][class][class] .welcome-modern-pricing-main-card {
  border: 1px solid var(--sw-line) !important;
  border-top: 3px solid var(--sw-brand-600) !important;
  border-radius: var(--sw-radius-lg, 18px) !important;
  background: var(--sw-surface) !important;
  box-shadow: 0 20px 44px rgba(12, 23, 41, .08) !important;
}

/* --- Respiro finale ------------------------------------------------------
   La sezione si chiudeva con un centinaio di pixel di niente sotto la nota. */
html body.nedate-ui-standard[class][class][class] .welcome-modern-pricing-section > .container {
  padding-bottom: 1rem !important;
}

/* =========================================================================
   43. SCELTA DEL PAESE SU TELEFONO — VISTA A TUTTO SCHERMO
   -------------------------------------------------------------------------
   Il selettore accetta due gusci — `.log-dropdown` (i pannelli fatti a mano di
   /welcome) e `.city-dd` (l'autocomplete delle citta' di /registrati e di
   /spedizioni) — perche' la vista piena gliela monta lo stesso controllore,
   `public/js/mobile-city-picker.js`, che gli mette addosso `qq-dd-sheet`. Con
   il solo `.log-dropdown` il pannello di /registrati finiva sotto al `<body>`
   con la sua barra e la sua X ma senza vestito: restava alto 130px, assoluto,
   con gli angoli tondi (misurato).

   Su desktop il menu paesi cade sotto il campo e va bene: c'e' spazio.
   Su telefono lo stesso pannello si apriva dentro una card larga 350px e
   alta poche righe, con dentro una ricerca e un elenco di duecento nazioni
   da scorrere in una finestrella. Qui diventa quello che deve essere: una
   vista piena, con la ricerca in cima al posto della navbar, la X per
   uscire e l'elenco che occupa tutto il resto dell'altezza.
   ========================================================================= */

/* Sul desktop la X non serve: si chiude cliccando fuori o con Esc. */
html body.nedate-ui-standard .qq-dd-close { display: none; }

@media (max-width: 767.98px) {

  html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .city-dd).qq-dd-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3000 !important;      /* sopra navbar (2000) e chat (2140) */
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sw-surface) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* --- La barra in cima, al posto della navbar -------------------------- */
  html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .city-dd).qq-dd-sheet :is(.country-search-wrap, .qq-sheet-head) {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    min-height: 56px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px !important;
    border-bottom: 1px solid var(--sw-line) !important;
    background: var(--sw-surface) !important;
  }
  /* Il campo ora sta dentro `.qq-search-field`, che e' l'elemento flex della
     barra: l'input deve riempirlo, non prendersi la sua larghezza naturale. */
  html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .city-dd).qq-dd-sheet :is(.country-search, .qq-sheet-input) {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--sw-control-h, 44px) !important;
    padding: 0 14px !important;
    border-radius: var(--sw-control-r, 10px) !important;
    font-size: var(--sw-control-fs, 15px) !important;
  }
  /* Senza cornice sembrava testo sulla pagina, non un campo in cui si scrive.
     Il campo di ricerca porta `nedate-no-standardize` — serviva a tenerlo
     fuori dalle etichette flottanti — e con quella classe resta fuori anche
     da tutta la vestizione dei campi: qui gliela si rimette a mano. */
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] :is(.log-dropdown, .city-dd).qq-dd-sheet :is(.country-search, .qq-sheet-input) {
    border-width: var(--sw-field-bw, 1px) !important;
    border-style: solid !important;
    border-color: var(--sw-field-border) !important;
    background-color: var(--sw-field-bg) !important;
  }
  html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .city-dd).qq-dd-sheet .qq-dd-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--sw-line) !important;
    border-radius: var(--sw-control-r, 10px) !important;
    background: var(--sw-surface-2) !important;
    color: var(--sw-ink) !important;
    -webkit-text-fill-color: var(--sw-ink) !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .city-dd).qq-dd-sheet .qq-dd-close:active {
    background: var(--sw-surface-3) !important;
  }

  /* --- L'elenco prende tutta l'altezza che resta ------------------------ */
  html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .city-dd).qq-dd-sheet .dd-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* Righe da dito, non da puntatore */
  html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .city-dd).qq-dd-sheet .log-dd-item {
    min-height: 52px !important;
    padding: 0 16px !important;
    font-size: var(--sw-text-sm, .9375rem) !important;
  }
  html body.nedate-ui-standard[class][class][class] :is(.log-dropdown, .city-dd).qq-dd-sheet .log-dd-item .fi {
    width: 24px !important;
    height: 17px !important;
  }

  /* Mentre la vista e' aperta la pagina sotto non scorre. Il corpo viene
     fissato e spostato in alto di quanto si era scorso (lo fa il JS con
     `top`), cosi' resta fermo dov'era invece di saltare in cima. */
  html:has(body.qq-dd-locked) {
    overflow: hidden !important;
  }
  body.qq-dd-locked {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Il pannello restava ancorato alla card invece che allo schermo: l'hero
     conserva `transform: matrix(1,0,0,1,0,0)` come stato finale dell'anima-
     zione d'ingresso, e un antenato con una trasformazione — anche identica
     a se stessa — diventa il riferimento di `position: fixed`. Mentre la
     vista e' aperta quelle trasformazioni si spengono: sono comunque
     coperte da un pannello che occupa tutto lo schermo. */
  body.qq-dd-locked :is(.landing-enter, .landing-inview, .welcome-modern-hero,
    .welcome-modern-hero__tool, .welcome-modern-hero-tool-card, .tool-card,
    .landing-tool-card) {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    /* anche il vetro smerigliato della card crea un riferimento per
       `position: fixed`: sotto un pannello a tutto schermo non si vede */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* =========================================================================
   44. SPIA DI ATTESA NEI CAMPI DI RICERCA
   -------------------------------------------------------------------------
   Un anello solo per tutte le ricerche del preventivo: paese e citta'.
   Quella della citta' esisteva gia' ma era il cerchio grigio di Bootstrap
   montato con stili scritti a mano nel JS; qui prende la voce del sito.
   ========================================================================= */

@keyframes qq-spin { to { transform: translateY(-50%) rotate(360deg); } }

html body.nedate-ui-standard[class][class][class] .qq-search-field {
  position: relative;
  display: block;
  flex: 1 1 auto !important;
  width: 100%;
  min-width: 0;
}
/* Lo spazio per l'anello e' sempre riservato: se comparisse spostando il
   testo, ogni battuta farebbe sobbalzare quello che si sta scrivendo. */
html body.nedate-ui-standard[class][class][class] .qq-search-field > :is(.country-search, .qq-sheet-input) {
  padding-right: 38px !important;
}
html body.nedate-ui-standard .qq-search-busy {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--sw-brand-100);
  border-top-color: var(--sw-brand-600);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--sw-dur-fast, .15s) var(--sw-ease, ease);
}
html body.nedate-ui-standard .qq-search-field.is-busy > .qq-search-busy {
  opacity: 1;
  visibility: visible;
  animation: qq-spin .6s linear infinite;
}

/* Chi ha chiesto di non vedere animazioni riceve un punto fermo, non un
   anello che gira (WCAG 2.3.3 / prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
  html body.nedate-ui-standard .qq-search-field.is-busy > .qq-search-busy {
    animation: none;
    border-color: var(--sw-brand-600);
    border-top-color: var(--sw-brand-100);
  }
}

/* --- La ricerca citta' usa la stessa spia --------------------------------
   Lo scheletro lo costruisce il JS di welcome (`qqSetCityLoading`) con un
   `.spinner-border` di Bootstrap: qui resta il meccanismo e cambia l'aspetto,
   cosi' le due ricerche del preventivo dicono "sto cercando" nello stesso modo. */
html body.nedate-ui-standard[class][class][class] .ac-loading-icon.spinner-border {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--sw-brand-100) !important;
  border-top-color: var(--sw-brand-600) !important;
  border-right-color: var(--sw-brand-100) !important;
  border-bottom-color: var(--sw-brand-100) !important;
  border-left-color: var(--sw-brand-100) !important;
  animation: spinner-border .6s linear infinite !important;
  color: transparent !important;
}


/* =========================================================================
   45. VISTA CITTA' A TUTTO SCHERMO SU TELEFONO
   -------------------------------------------------------------------------
   Stessa forma della scelta paese. La barra in cima e' costruita dal JS
   quando serve, perche' il campo vero deve restare dentro il <form>: qui
   fuori dalla vista non deve vedersi.
   ========================================================================= */

html body.nedate-ui-standard .qq-city-dd > .qq-sheet-head { display: none; }

@media (max-width: 767.98px) {
  html body.nedate-ui-standard[class][class][class] .qq-city-dd.qq-dd-sheet {
    max-height: none !important;
    overflow: hidden !important;
  }
  html body.nedate-ui-standard[class][class][class] .qq-city-dd.qq-dd-sheet > .qq-sheet-head {
    display: flex !important;
  }
  html body.nedate-ui-standard[class][class][class] .qq-city-dd.qq-dd-sheet .city-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* Righe da dito, come nell'elenco dei paesi */
  html body.nedate-ui-standard[class][class][class] .qq-city-dd.qq-dd-sheet .qq-city-item {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    font-size: var(--sw-text-sm, .9375rem) !important;
  }
  html body.nedate-ui-standard[class][class][class] .qq-city-dd.qq-dd-sheet .log-dd-empty {
    padding: 22px 16px !important;
  }
}

/* =========================================================================
   46. PAGINE PUBBLICHE — LA STESSA VOCE DI WELCOME
   -------------------------------------------------------------------------
   Tracking, tariffe, FAQ, contatti e le tre pagine legali erano rimaste al
   trattamento di prima: riquadri icona in rosa al 6% con il glifo quasi
   invisibile sopra, e sulle pagine legali un pulsante a sfumatura che in
   tutto il resto del sito non esiste piu'.
   Qui si allineano gli atomi condivisi, non i singoli impaginati: un solo
   riquadro icona, un solo pulsante, un solo corpo per le didascalie.
   ========================================================================= */

/* --- Riquadri principali: pieni di marca, come le schede di welcome ------ */
html body.nedate-ui-standard[class][class][class] :is(
  .legal-login-feature > span,
  .faq-login-benefits > div > span,
  .contact-login-features > div > span,
  .tracking-login-features > div > span,
  .legal-login-summary__icon,
  .contact-login-feature-icon,
  .sw-card-icon,
  .contact-login-card-icon,
  .tracking-login-card-icon,
  .faq-login-card-icon,
  .pricing-login-card-icon,
  .login-page__feat-icon) {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--sw-brand-600) !important;
  background-image: none !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard[class][class][class] :is(
  .legal-login-feature > span,
  .faq-login-benefits > div > span,
  .contact-login-features > div > span,
  .tracking-login-features > div > span,
  .legal-login-summary__icon,
  .contact-login-feature-icon,
  .sw-card-icon,
  .contact-login-card-icon,
  .tracking-login-card-icon,
  .faq-login-card-icon,
  .pricing-login-card-icon,
  .login-page__feat-icon) > i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* --- Riquadri che si ripetono riga dopo riga -----------------------------
   Qui il pieno sarebbe un muro: tinta piu' decisa del 6% di prima, glifo
   scuro di marca. La gerarchia la fa la differenza fra i due trattamenti. */
html body.nedate-ui-standard[class][class][class] :is(
  .legal-login-summary__rows > div > span,
  .tracking-login-trust > div > span,
  .login-page__trust-strip > div > span,
  .faq-redesign-category-icon,
  .faq-modern-panel-icon,
  .faq-modern-question-icon,
  .faq-redesign-stats-card > div > span,
  .pricing-modern-strip-icon) {
  border: 0 !important;
  background: var(--sw-brand-100) !important;
  background-image: none !important;
  color: var(--sw-brand-700) !important;
  -webkit-text-fill-color: var(--sw-brand-700) !important;
}
html body.nedate-ui-standard[class][class][class] :is(
  .legal-login-summary__rows > div > span,
  .tracking-login-trust > div > span,
  .login-page__trust-strip > div > span,
  .faq-redesign-category-icon,
  .faq-modern-panel-icon,
  .faq-modern-question-icon,
  .faq-redesign-stats-card > div > span,
  .pricing-modern-strip-icon) > i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* --- Il pulsante delle pagine legali -------------------------------------
   Era `linear-gradient(100deg, #f04651, #ff1f17)` con ombra colorata e uno
   scatto verso l'alto al passaggio: l'unico bottone del sito fatto cosi'. */
html body.nedate-ui-standard[class][class][class] .legal-login-summary__button {
  min-height: var(--sw-control-h-lg, 52px) !important;
  border-radius: var(--sw-control-r, 10px) !important;
  background: var(--sw-brand-600) !important;
  background-image: none !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  box-shadow: none !important;
  font-size: var(--sw-text-sm, .9375rem) !important;
  transition: background var(--sw-dur-fast, .15s) var(--sw-ease, ease) !important;
}
html body.nedate-ui-standard[class][class][class] .legal-login-summary__button:hover {
  background: var(--sw-brand-700) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Le didascalie delle schedine nei cappelli --------------------------- */
html body.nedate-ui-standard[class][class][class] :is(
  .legal-login-feature small,
  .faq-login-benefits small,
  .contact-login-features small,
  .tracking-login-features small,
  .legal-login-summary__rows small,
  .contact-login-feature small,
  .faq-login-card-lead,
  .tracking-login-feature small) {
  font-size: var(--sw-text-xs) !important;
  line-height: 1.45 !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}

/* --- Il percorso "cosa vedrai" del tracking ------------------------------
   I tre passi avevano pastiglie chiarissime e fra loro un tratteggio rosso:
   lo stesso tratteggio gia' tolto dal pannello del preventivo. Un trattino
   pesa quanto il contenuto che separa, e qui separa tre parole. */
html body.nedate-ui-standard[class][class][class] .tracking-login-journey > div > span {
  border-color: var(--sw-brand-100) !important;
  background: var(--sw-brand-100) !important;
  color: var(--sw-brand-700) !important;
  -webkit-text-fill-color: var(--sw-brand-700) !important;
}
html body.nedate-ui-standard[class][class][class] .tracking-login-journey :is(i, em, b)::before,
html body.nedate-ui-standard[class][class][class] .tracking-login-journey > div > span > i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
/* I trattini sono <i> vuoti con `repeating-linear-gradient`: qui diventano
   una linea sola, nel tono chiaro di marca. */
/* Solo i connettori, non le icone: `<i>` e' anche l'elemento dei simboli
   Bootstrap, e senza il `:not` la tinta finiva dietro pacco, casa e spunta. */
html body.nedate-ui-standard[class][class][class] :is(.tracking-login-journey, .tracking-login-preview, .tracking-login-preview__route) > :is(i, b, hr):not([class*="bi"]) {
  background-image: none !important;
  background-color: var(--sw-brand-200, #ffc9cc) !important;
  /* niente `border-style: solid` senza larghezza: sarebbe un bordo medio
     di tre pixel nel colore del testo — una sbarra blu al posto dei trattini */
  border: 0 !important;
  border-radius: 2px !important;
}

/* --- Due contrasti misurati e corretti -----------------------------------
   La pillola dello sconto su /tariffe (3,36:1 su chiaro) e l'occhiello
   "Documento legale" sulle tre pagine legali in tema scuro (3,59:1): sotto
   il 4,5:1 richiesto a questi corpi. Entrambe passano alla coppia gia' usata
   per le targhette del preventivo. */
html body.nedate-ui-standard[class][class][class] .pricing-modern-save-badge {
  background: var(--sw-brand-50) !important;
  color: var(--sw-brand-700) !important;
  -webkit-text-fill-color: var(--sw-brand-700) !important;
  border-color: var(--sw-brand-100) !important;
}
html body.nedate-ui-standard[class][class][class] :is(.legal-page__eyebrow, .legal-login-summary__kicker),
html body.nedate-ui-standard[class][class][class] :is(.pricing-login-plans-head, .faq-redesign-body-head, .pricing-modern-section-head) > span,
html body.nedate-ui-standard[class][class][class] .legal-login-toolbar__heading > span {
  font-size: 12px !important;
  color: var(--sw-brand-700) !important;
  -webkit-text-fill-color: var(--sw-brand-700) !important;
}

/* =========================================================================
   47. I CAPPELLI DELLE PAGINE PUBBLICHE ALLA SCALA DI WELCOME
   -------------------------------------------------------------------------
   Misurato affiancando le due pagine: il titolo della home e' Archivo a
   50,4px con -1,01px di avvicinamento; quello del tracking Archivo a 64px
   con -3,84px. Stessa famiglia, ma un quarto piu' grande e con le lettere
   schiacciate l'una sull'altra: a occhio sembra un altro carattere, ed e'
   esattamente l'impressione che dava.
   `login-page__title` e' condiviso da tracking, contatti, FAQ e accesso:
   allinearlo li mette tutti sulla stessa voce.
   ========================================================================= */

/* Due id nel prefisso: il titolo e' tenuto da una regola
   `html:not(#_):not(#__) …` a `clamp(2.25rem, 5vw, 4.68rem)`, che a 1280px
   vale esattamente i 64px misurati. Alla pari di id si passa. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .login-page__title {
  font-family: var(--sw-font-display) !important;
  font-size: var(--sw-text-h1) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .login-page__title span {
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .login-page__lead {
  font-size: var(--sw-text-lead) !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}

/* Le etichette dentro quelle card seguono i token delle etichette */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] :is(.tracking-login-input-wrap, .contact-login-field, .login-page__field) > label {
  font-size: var(--sw-label-fs, 11px) !important;
  font-weight: var(--sw-label-weight, 600) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--sw-label-ink, var(--sw-muted)) !important;
  -webkit-text-fill-color: var(--sw-label-ink, var(--sw-muted)) !important;
}


/* --- Il velo rosa del cappello tracking ---------------------------------
   `::before` disegna `radial-gradient(680px 300px at 12% -8%, …)` dentro una
   sezione larga 573px: il cerchio viene tagliato di netto dal bordo della
   scatola e si vede una banda rosa con due lati dritti. Il gradiente qui si
   spegne prima di arrivare al bordo, cosi' sfuma invece di essere tranciato. */
html body.nedate-ui-standard[class][class][class] .tracking-login-hero::before {
  background: radial-gradient(520px 280px at 0% 0%,
              rgba(240, 70, 81, .10) 0%,
              rgba(240, 70, 81, .04) 45%,
              transparent 72%) !important;
}

/* =========================================================================
   48. /TRACKING — UNA CARD SOLA, UN VELO SOLO
   -------------------------------------------------------------------------
   Misurato: `.tracking-login-form-shell` e' bianca, bordata, arrotondata a
   24px, con ombra e 30px di spazio interno — e dentro ci sta
   `.tracking-login-card`, di nuovo bianca, di nuovo bordata, arrotondata a
   8px, con la sua ombra e altri 37px di spazio. Due cornici per un modulo
   solo, e 67px buttati fra le due. Nella home il riquadro del preventivo e'
   uno.
   E dietro al titolo si sommavano due veli rosa: quello della scocca di
   pagina e un `::before` della sezione, che insieme disegnavano un rettangolo
   con un lato dritto in mezzo al testo.
   ========================================================================= */

/* --- Il guscio esterno torna un contenitore, non una card --------------- */
html body.nedate-ui-standard[class][class][class] .tracking-login-form-shell {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- La card: lo stesso trattamento del riquadro preventivo della home --- */
/* Stessa cornice per tutte le card principali delle pagine pubbliche: erano
   arrotondate a 8px mentre il riquadro del preventivo in home sta a 18. */
html body.nedate-ui-standard[class][class][class] :is(.tracking-login-card,
  .contact-modern-form-card, .faq-login-card, .pricing-login-card) {
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-lg, 18px) !important;
  background: var(--sw-surface) !important;
  box-shadow: 0 24px 60px rgba(12, 23, 41, .10) !important;
}

/* --- Un velo solo -------------------------------------------------------
   Quello della sezione sparisce: la scocca di pagina ne ha gia' uno, e due
   sovrapposti facevano una placca con un bordo dritto dietro al titolo. */
html body.nedate-ui-standard[class][class][class] .tracking-login-hero::before {
  content: none !important;
}
html body.nedate-ui-standard[class][class][class] .tracking-page-shell {
  background-image: radial-gradient(760px 420px at 0% -6%,
                    rgba(217, 35, 54, .06) 0%,
                    rgba(217, 35, 54, .02) 48%,
                    transparent 74%) !important;
}
html body.nedate-ui-standard[class][class][class] .tracking-page-shell::before {
  content: none !important;
}

/* --- L'anteprima finta segue il tema ------------------------------------
   I pallini con le icone e l'anello attorno al pacchetto erano bianchi fissi:
   in tema scuro restavano tre macchie chiare dentro una card scura. */
html body.nedate-ui-standard[class][class][class] .tracking-login-preview__route > span {
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}
html body.nedate-ui-standard[class][class][class] .tracking-login-preview__parcel {
  border-color: var(--sw-surface) !important;
  box-shadow: 0 0 0 6px var(--sw-surface) !important;
}
html body.nedate-ui-standard[class][class][class] .tracking-login-preview__route {
  /* Era riempita di --sw-surface-2: un riquadro pieno dentro la card. Adesso
     e' solo un filo, come su /login. */
  background: transparent !important;
}

/* =========================================================================
   49. /TARIFFE — STESSO TRATTAMENTO DI /TRACKING
   -------------------------------------------------------------------------
   Stessi tre difetti: il titolo a una scala tutta sua, una scatola bordata
   dentro una scatola bordata, e i riquadri icona in rosa al 6%.
   ========================================================================= */

/* Il titolo di /tariffe e /faq usa `.faq-modern-title`: 58,24px contro i
   50,4px della home. Stessa scala per tutti. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] :is(.faq-modern-title, .pricing-modern-title) {
  font-size: var(--sw-text-display) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}

/* La cornice della card principale, come in home e su /tracking */
/* Il raggio delle card e' tenuto da una regola canonica che legge
   `--nd-canon-card-radius`: inutile rincorrerla a colpi di specificita',
   basta ridichiarare il token sulle card che devono stare a 18. */
html body.nedate-ui-standard :is(.pricing-login-card, .faq-login-card,
  .contact-modern-form-card, .tracking-login-card) {
  --nd-canon-card-radius: var(--sw-radius-lg, 18px);
  border-radius: var(--sw-radius-lg, 18px) !important;
}

/* --- Il blocco del prezzo non e' una card dentro la card ----------------
   Aveva bordo, sfondo e raggio propri dentro un contenitore che li ha gia':
   due cornici concentriche per dire un numero. Resta il contenuto, separato
   da un filo sopra e sotto. */
html body.nedate-ui-standard[class][class][class][class] .pricing-login-price {
  border: 0 !important;
  border-top: 1px solid var(--sw-line) !important;
  border-bottom: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}

/* --- Le spunte tornano di marca -----------------------------------------
   Verdi: nel tracking il verde vuol dire "consegnato". Qui dicono "incluso". */
html body.nedate-ui-standard[class][class][class][class] :is(.pricing-login-included, .pricing-login-card) li > i.bi-check-circle-fill,
html body.nedate-ui-standard[class][class][class][class] .pricing-modern-feature-yes {
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
}

/* --- I riquadri icona di questa pagina ---------------------------------- */
html body.nedate-ui-standard[class][class][class] :is(.pricing-login-benefits > div > span,
  .pricing-login-preview-grid > div > span) {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
}
html body.nedate-ui-standard[class][class][class] :is(.pricing-login-benefits > div > span,
  .pricing-login-preview-grid > div > span) > i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
html body.nedate-ui-standard[class][class][class] :is(.pricing-login-benefits, .pricing-login-preview-grid) :is(small, p) {
  font-size: var(--sw-text-xs) !important;
  line-height: 1.45 !important;
}

/* =========================================================================
   50. /CONTATTI — GLI ULTIMI RIQUADRI E I PASSI
   -------------------------------------------------------------------------
   La struttura qui era gia' a posto (una card sola, un velo solo, titolo e
   campi alla scala della home). Restavano due dettagli: i riquadri delle due
   schede di contatto diretto in rosa al 6%, e i passi numerati come semplici
   cifre — mentre nella home "Spedire in tre passaggi" ha il numero dentro un
   cerchio e un binario che tiene insieme la sequenza.
   ========================================================================= */

html body.nedate-ui-standard[class][class][class] .contact-login-direct > div > span {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
}
html body.nedate-ui-standard[class][class][class] .contact-login-direct > div > span > i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* --- I passi: stessa forma della home ------------------------------------ */
html body.nedate-ui-standard[class][class][class] .contact-modern-next {
  counter-reset: contact-step;
  /* un respiro fra le due schede di contatto e la sequenza dei passi */
  margin: clamp(1rem, .7rem + .8vw, 1.5rem) 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
html body.nedate-ui-standard[class][class][class] .contact-modern-next > li {
  position: relative;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  row-gap: 2px !important;
  align-items: start !important;
  padding: 0 0 18px !important;
  list-style: none !important;
}
html body.nedate-ui-standard[class][class][class] .contact-modern-next > li:last-child {
  padding-bottom: 0 !important;
}
html body.nedate-ui-standard[class][class][class] .contact-modern-next > li::before {
  counter-increment: contact-step;
  content: counter(contact-step);
  grid-area: 1 / 1 / span 2 / 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sw-brand-600);
  color: var(--sw-on-brand);
  -webkit-text-fill-color: var(--sw-on-brand);
  font-size: 13px;
  font-weight: var(--sw-weight-bold, 700);
  line-height: 1;
}
/* Il binario che dice "sono in sequenza", come nella home */
html body.nedate-ui-standard[class][class][class] .contact-modern-next > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 34px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--sw-brand-100);
}
html body.nedate-ui-standard[class][class][class] .contact-modern-next > li > strong {
  grid-area: 1 / 2 / 2 / 3;
  font-size: var(--sw-text-sm, .9375rem) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}
html body.nedate-ui-standard[class][class][class] .contact-modern-next > li > span {
  grid-area: 2 / 2 / 3 / 3;
  font-size: var(--sw-text-xs) !important;
  line-height: 1.5 !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}

/* --- /tracking: gli stessi margini laterali di /tariffe -----------------
   Misurato a 1280px: su /tariffe il contenuto parte a 66px dal bordo perche'
   il contenitore porta `padding-inline: var(--sw-gutter)`; su /tracking il
   contenitore aveva padding 0 e il contenuto arrivava a 35px — trentuno
   pixel piu' vicino al bordo su entrambi i lati. */
html body.nedate-ui-standard[class][class][class] :is(.tracking-login-inner, .login-page__trust-strip.tracking-login-trust) {
  padding-inline: var(--sw-gutter) !important;
}
/* Dentro, la riga Bootstrap si riprende meta' gutter con i margini negativi
   e le colonne se lo rimettono come padding: su /tariffe non c'e' nessuna
   `.row` — c'e' una griglia — e il contenuto resta dove lo mette il
   contenitore. Qui il giro si annulla, cosi' i due bordi coincidono. */
html body.nedate-ui-standard[class][class][class] .tracking-login-inner > .row {
  margin-inline: 0 !important;
}
html body.nedate-ui-standard[class][class][class] .tracking-login-inner > .row > [class*="col-"] {
  padding-inline: 0 !important;
}

/* Sotto il desktop la card del tracking restava ferma a 610px e si centrava,
   lasciando 74px per lato mentre su /tariffe la card usa tutta la colonna.
   Su tablet un modulo deve prendersi lo spazio che c'e'. */
@media (max-width: 959.98px) {
  html body.nedate-ui-standard[class][class][class] :is(.tracking-login-card, .tracking-login-form-shell) {
    max-width: none !important;
    width: 100% !important;
  }
  /* La colonna e' `col-md-11`: undici dodicesimi, centrati. Sotto il desktop
     valgono 29px per lato che su /tariffe non ci sono. */
  html body.nedate-ui-standard[class][class][class] .tracking-login-inner > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* --- /contatti: gli stessi margini laterali di /tariffe -----------------
   Stesso terzetto di cause del tracking, con un di piu': la griglia del
   cappello porta margini negativi propri, e a 390px la card finiva a 3px dal
   bordo dello schermo. */
html body.nedate-ui-standard[class][class][class] .contact-login-inner {
  padding-inline: var(--sw-gutter) !important;
}
html body.nedate-ui-standard[class][class][class] .contact-login-grid {
  margin-inline: 0 !important;
}
html body.nedate-ui-standard[class][class][class] .contact-login-grid > [class*="col-"] {
  padding-inline: 0 !important;
}
@media (max-width: 959.98px) {
  html body.nedate-ui-standard[class][class][class] :is(.contact-modern-form-card, .contact-login-form-shell) {
    max-width: none !important;
    width: 100% !important;
  }
  html body.nedate-ui-standard[class][class][class] .contact-login-grid > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* =========================================================================
   51. LE FASCE A TUTTA LARGHEZZA RIMETTONO IL MARGINE AL CONTENUTO
   -------------------------------------------------------------------------
   Misurato a 1280px: sulla home il contenuto sta a 66px dal bordo — cappello,
   schede, fascia dei numeri, sezione tariffe — tranne dentro le fasce che
   escono dalla scocca per dipingere da bordo a bordo. La fascia si sposta di
   -35px (il gutter della scocca) ma il suo contenitore ne rimette solo 31,2:
   il contenuto finiva a 31px, la metà degli altri. La fascia finale, a 20.
   Qui il contenitore rimette entrambi: 35 + 31,2 = 66, come tutto il resto.
   ========================================================================= */

html body.nedate-ui-standard.nedate-public-standard :is(.welcome-modern-how-section,
  .welcome-modern-strip, .welcome-modern-faq-strip, .welcome-modern-cta,
  .welcome-modern-channels, .landing-cta-banner, .pricing-modern-cta-section)
  > :is(.container, .container-xl, .container-fluid, .container-lg) {
  padding-inline: calc(var(--sw-gutter) + var(--sw-shell-gutter, 0px)) !important;
  max-width: none !important;
}

/* Provato e ritirato (2026-09-12): portare `--sw-shell-gutter` a 1rem sotto i
   992px allineava la home a /tariffe a 768px (contenuto a 35) ma a 390px le
   fasce finivano a -9px, cioe' fuori dallo schermo. La home non ha gutter di
   pagina proprio perche' le sue fasce corrono da bordo a bordo: le due cose
   non possono valere insieme senza rifare l'impianto della scocca. */

/* --- Le card dei moduli riempiono la loro colonna ------------------------
   `max-width: 610px` le teneva ferme: a 1920px il contenuto a sinistra
   arrivava a 240 dal bordo e la card si fermava a 295, cioe' 55px prima.
   La colonna decide la larghezza, non un numero fisso. */
html body.nedate-ui-standard[class][class][class] :is(.tracking-login-card,
  .tracking-login-form-shell, .contact-modern-form-card, .contact-login-form-shell,
  .login-page__card, .login-refresh-card, .login-page__form-shell) {
  max-width: none !important;
  width: 100% !important;
}

/* =========================================================================
   52. /ACCESSO — GLI STANDARD DELLE ALTRE PAGINE
   -------------------------------------------------------------------------
   Titolo, campi ed etichette erano gia' allineati dalle sezioni precedenti.
   Restavano: il margine sinistro 28px piu' dentro delle altre pagine (la
   solita `.row` Bootstrap con i suoi gutter), la card arrotondata a 8 invece
   che a 18, il riquadro icona in rosa al 6%, i trattini nell'anteprima finta
   e il pulsante di invio a 12,6px invece del corpo dei controlli.
   ========================================================================= */

/* Stessa meccanica di /tracking e /contatti: le colonne senza spazio interno,
   cosi' la card riempie la sua colonna e il suo bordo sinistro cade a 640 a
   1280px, e lo stacco fra le due colonne lo da' il pannello di sinistra, che
   si ferma 2rem prima. Prima il pannello aveva 28px di spazio interno su
   entrambi i lati: il titolo partiva a 94px invece dei 66 di ogni altra
   pagina. Azzerandolo del tutto pero' le due card finivano per toccarsi —
   serve a destra, non a sinistra. */
html body.nedate-ui-standard[class][class][class] :is(.login-page__grid, .login-page__inner > .row) {
  margin-inline: 0 !important;
}
html body.nedate-ui-standard[class][class][class] :is(.login-page__grid, .login-page__inner > .row) > [class*="col-"] {
  padding-inline: 0 !important;
}
html body.nedate-ui-standard[class][class][class] .login-page__brand-panel {
  padding-left: 0 !important;
  padding-right: 2rem !important;
}
@media (max-width: 959.98px) {
  html body.nedate-ui-standard[class][class][class] .login-page__brand-panel {
    padding-right: 0 !important;
  }
}

/* --- La card: stessa cornice delle altre pagine -------------------------- */
html body.nedate-ui-standard :is(.login-page__card, .login-refresh-card) {
  --nd-canon-card-radius: var(--sw-radius-lg, 18px);
  border-radius: var(--sw-radius-lg, 18px) !important;
  border: 1px solid var(--sw-line) !important;
  background: var(--sw-surface) !important;
  box-shadow: 0 24px 60px rgba(12, 23, 41, .10) !important;
}

/* Dentro la card c'e' un `.card-body` con una superficie propria: in tema
   scuro e' `#101827` dentro una card `#101d31`, e si vede un rettangolo
   annidato. Una superficie sola. */
html body.nedate-ui-standard[class][class][class] :is(.login-page__card, .login-refresh-card) > .card-body {
  background: transparent !important;
  border: 0 !important;
}

/* --- Il riquadro icona: pieno di marca ----------------------------------- */
html body.nedate-ui-standard[class][class][class] .login-refresh-form-icon {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
}
html body.nedate-ui-standard[class][class][class] .login-refresh-form-icon > i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* --- Il pulsante di invio al corpo dei controlli ------------------------- */
html body.nedate-ui-standard[class][class][class] .login-page__form-shell button[type="submit"] {
  font-size: var(--sw-control-fs, 15px) !important;
  min-height: var(--sw-control-h-lg, 52px) !important;
  border-radius: var(--sw-control-r, 10px) !important;
}

/* --- L'anteprima finta: niente trattini, e segue il tema ----------------- */
html body.nedate-ui-standard[class][class][class] .login-refresh-preview__route > b {
  background-image: none !important;
  background-color: var(--sw-brand-200, #ffc9cc) !important;
  border: 0 !important;
  border-radius: 2px !important;
}
html body.nedate-ui-standard[class][class][class] .login-refresh-preview__route > span {
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}
html body.nedate-ui-standard[class][class][class] :is(.login-refresh-preview__window, .login-refresh-preview__content) {
  background: var(--sw-surface) !important;
  border-color: var(--sw-line) !important;
}
html body.nedate-ui-standard[class][class][class] .login-refresh-preview__parcel {
  border-color: var(--sw-surface) !important;
  box-shadow: 0 0 0 6px var(--sw-surface) !important;
}

/* --- Il fondo delle pagine di accesso in tema scuro ----------------------
   Misurato campionando i pixel dietro al titolo: in tema scuro il testo esce
   quasi bianco — rgb(238,244,252) — sopra un fondo rgb(252,240,242), cioe'
   lo stesso rosa chiarissimo del tema chiaro: «Torna a spedire» spariva.
   La causa e' un `radial-gradient` acceso dipinto sul <body> senza colore di
   fondo sotto. Qui il fondo torna quello del tema, con sopra lo stesso velo
   tenue delle altre pagine. */
:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.nedate-ui-standard.nedate-auth-standard,
body.dark-mode.nedate-ui-standard.nedate-auth-standard {
  background-color: var(--sw-surface) !important;
  background-image: radial-gradient(760px 420px at 0% -6%,
                    rgba(240, 70, 81, .10) 0%,
                    rgba(240, 70, 81, .03) 48%,
                    transparent 74%) !important;
}
:is(html[data-theme="dark"], html[data-bs-theme="dark"]) body.nedate-ui-standard.nedate-auth-standard :is(.login-page, .login-refresh-page, .container-fluid, main, .nedate-modern-main),
body.dark-mode.nedate-ui-standard.nedate-auth-standard :is(.login-page, .login-refresh-page, .container-fluid, main, .nedate-modern-main) {
  background-image: none !important;
  background-color: transparent !important;
}

/* Nota: il velo bianco che copriva /login in tema scuro non nasceva qui ma
   dal blocco delle shell dell'area riservata in nedate-unified.css, che non
   aveva la guardia sul tema scuro che invece ha il suo gemello pubblico.
   E' corretto alla fonte: la regola chiara ora e' limitata al tema chiaro e
   accanto c'e' la sua versione scura. */

/* --- L'anteprima finta di /login: spazio sotto per il timbro ------------- */
html body.nedate-ui-standard[class][class][class] .login-refresh-preview {
  margin-bottom: 26px !important;
}

/* =========================================================================
   53. /TRACKING — MOBILE FLAT
   -------------------------------------------------------------------------
   Su mobile il tracking e' uno strumento operativo: una sola superficie,
   nessuna card contenitore e nessun velo rosa. Campi, CTA, stati e risultato
   conservano la gerarchia; il desktop resta invariato.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage.tracking-page-shell {
    padding: calc(56px + 15px + env(safe-area-inset-top, 0px)) 0 1.5rem !important;
    background-color: var(--sw-surface) !important;
    background-image: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage .tracking-login-inner {
    min-height: 0 !important;
    padding-inline: 1.25rem !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage .tracking-login-grid {
    --bs-gutter-y: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage .tracking-login-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage .tracking-login-trust {
    display: block !important;
    width: 100% !important;
    margin: 1.5rem auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage .tracking-login-trust > div {
    width: 100% !important;
    min-height: 64px !important;
    padding: .75rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sw-line) !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage .tracking-login-trust > div:last-child {
    border-bottom: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage .tracking-login-trust small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* =========================================================================
   54. /TRACKING — CAMPO CODICE COERENTE CON /LOGIN
   -------------------------------------------------------------------------
   Il campo mantiene semantica e icona del tracking, ma adotta le stesse
   misure, tipografia, bordo, ombra, label e stati del campo email di accesso.
   ========================================================================= */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage .tracking-login-input-wrap.form-floating {
  min-height: 58px !important;
}





/* Il campo di questa pagina non ha piu' regole sue: misure, cornice,
   carattere, inchiostro, stato di fuoco ed etichetta flottante arrivano dal
   sistema comune. Teneva l'icona a 4,2rem mentre il sistema la tiene a 2,85:
   il campo dava retta al sistema e l'etichetta a se stessa, e il testo usciva
   diciannove pixel piu' a destra dell'etichetta. Resta qui solo l'icona. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] #trackingPage .tracking-login-input-icon {
  top: 50% !important;
  left: 1.35rem !important;
  display: grid !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  place-items: center !important;
  color: rgb(100, 116, 139) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

/* =========================================================================
   55. /PRICING — STESSO DISTACCO MOBILE DELLA HOME
   -------------------------------------------------------------------------
   La home porta il primo eyebrow a 71px dall'alto: navbar da 56px + 15px.
   Su /pricing si sommavano invece il padding della pagina (6.4rem) e quello
   dell'hero (1rem), lasciando un vuoto molto piu' ampio. Una sola sorgente
   dell'offset, identica alla home.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #pricingPage.pricing-modern-page {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #pricingPage > .pricing-modern-hero {
    padding-top: calc(56px + 15px + env(safe-area-inset-top, 0px)) !important;
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #pricingPage :is(.pricing-modern-hero, .pricing-modern-body) > .container-xl {
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #pricingPage .pricing-login-copy > .faq-modern-eyebrow:first-child {
    margin-top: 0 !important;
  }
}

/* =========================================================================
   56. /FAQ — FRAME MOBILE DI RIFERIMENTO
   -------------------------------------------------------------------------
   Un solo margine da 1.25rem su entrambi i lati e il primo contenuto 15px
   sotto la navbar da 56px, senza sommare il padding della pagina a quello
   del container.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #faqPage.faq-modern-page {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #faqPage > .faq-modern-hero {
    padding-top: calc(56px + 15px + env(safe-area-inset-top, 0px)) !important;
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #faqPage :is(.faq-modern-hero, .faq-modern-body) > .container-xl {
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #faqPage .faq-login-copy > .faq-modern-eyebrow:first-child {
    margin-top: 0 !important;
  }
}

/* =========================================================================
   57. /LOGIN — MOBILE FLAT COME /TRACKING
   -------------------------------------------------------------------------
   Stessa struttura operativa del tracking: una sola superficie bianca,
   contenuto 15px sotto la navbar, gutter da 1.25rem e nessuna card esterna.
   Anche i vantaggi diventano una lista piatta; il desktop resta invariato.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage.login-page {
    min-height: 0 !important;
    padding: calc(56px + 15px + env(safe-area-inset-top, 0px)) 0 1.5rem !important;
    background-color: var(--sw-surface) !important;
    background-image: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage > .login-page__inner {
    min-height: 0 !important;
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage .login-refresh-grid {
    --bs-gutter-y: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage .login-refresh-grid > [class*="col-"] {
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage :is(.login-page__form-shell, .login-page__card, .login-refresh-card) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage .login-page__card {
    --nd-canon-card-bg: transparent !important;
    --nd-canon-card-radius: 0px !important;
    --nd-canon-card-shadow: none !important;
    --nd-brand-surface: transparent !important;
    --nd-brand-radius-lg: 0px !important;
    --nd-brand-shadow-soft: none !important;
    overflow: visible !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage .login-page__card > .card-body {
    padding: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage .login-page__trust-strip {
    display: block !important;
    width: 100% !important;
    margin: 1.5rem auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage .login-page__trust-strip > div {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: .75rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sw-line) !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage .login-page__trust-strip > div:last-child {
    border-bottom: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #loginPage .login-page__trust-strip small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* =========================================================================
   58. /PASSWORD DIMENTICATA — MOBILE FLAT COME /LOGIN
   -------------------------------------------------------------------------
   La pagina di recupero usa lo stesso frame operativo dell'accesso: sfondo
   unico, gutter da 1.25rem e modulo senza card o doppi spazi interni.

   Nell'elenco degli id ci sono anche le due pagine del portale ospite —
   `#guestPinRecoveryPage`, il ricambio del PIN, e `#guestPinEntryPage`, il
   cancello che lo chiede: stessa impaginazione, stesso foglio, ma restavano
   fuori da queste righe perche' l'aggancio e' l'id. Sul telefono si vedeva:
   la griglia teneva i 650px di altezza minima del computer e fra la scheda e
   la fascia delle rassicurazioni si apriva un vuoto di 151px contro i 21 di
   /forgot-password (misurati).
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage).forgot-page {
    min-height: 0 !important;
    padding: calc(56px + 15px + env(safe-area-inset-top, 0px)) 0 1.5rem !important;
    background-color: var(--sw-surface) !important;
    background-image: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) > .login-page__inner {
    min-height: 0 !important;
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) .forgot-page__main-row {
    --bs-gutter-y: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) .forgot-page__main-row > [class*="col-"] {
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) :is(.login-page__form-shell, .login-page__card, .login-refresh-card, .forgot-refresh-card) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) .forgot-refresh-card {
    --nd-canon-card-bg: transparent !important;
    --nd-canon-card-radius: 0px !important;
    --nd-canon-card-shadow: none !important;
    --nd-brand-surface: transparent !important;
    --nd-brand-radius-lg: 0px !important;
    --nd-brand-shadow-soft: none !important;
    overflow: visible !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) .forgot-refresh-card > .card-body {
    padding: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) .forgot-page__trust-strip {
    display: block !important;
    width: 100% !important;
    margin: 1.5rem auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* La voce della fascia era `flex`: icona, titolo e frase diventavano tre
     pezzi in fila, e il titolo si spezzava in una colonna stretta — «I tuoi /
     dati / sono al sicuro». Torna alla griglia del desktop, dove l'icona
     occupa le due righe e il testo si impila nella colonna accanto. */
  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) .forgot-page__trust-strip > div {
    display: grid !important;
    grid-template-columns: 3.2rem 1fr !important;
    column-gap: .9rem !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: .75rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(100, 116, 139, .38) !important;
    box-shadow: inset 0 -1px 0 rgba(100, 116, 139, .16) !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) .forgot-page__trust-strip > div:last-child {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] :is(#forgotPasswordPage, #resetPasswordPage, #guestPinRecoveryPage, #guestPinEntryPage) .forgot-page__trust-strip small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* =========================================================================
   59. /REGISTRATI — MOBILE FLAT COME /LOGIN
   -------------------------------------------------------------------------
   La registrazione conserva i propri controlli, ma usa la stessa scocca
   mobile piatta dell'accesso: un solo sfondo e nessuna card contenitore.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage.register-page {
    min-height: 0 !important;
    padding: calc(56px + 15px + env(safe-area-inset-top, 0px)) 0 1.5rem !important;
    background-color: var(--sw-surface) !important;
    background-image: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage > .login-page__inner {
    min-height: 0 !important;
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage .register-page__main-row {
    --bs-gutter-y: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage .register-page__main-row > [class*="col-"] {
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage :is(.login-page__form-shell, .login-page__card, .login-refresh-card, .register-refresh-card) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage .register-refresh-card {
    --nd-canon-card-bg: transparent !important;
    --nd-canon-card-radius: 0px !important;
    --nd-canon-card-shadow: none !important;
    --nd-brand-surface: transparent !important;
    --nd-brand-radius-lg: 0px !important;
    --nd-brand-shadow-soft: none !important;
    overflow: visible !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage .register-refresh-card > .card-body {
    padding: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage .register-page__trust-strip {
    display: block !important;
    width: 100% !important;
    margin: 1.5rem auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage .register-page__trust-strip > div {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: .75rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(100, 116, 139, .38) !important;
    box-shadow: inset 0 -1px 0 rgba(100, 116, 139, .16) !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage .register-page__trust-strip > div:last-child {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #registerPage .register-page__trust-strip small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* =========================================================================
   53. SELETTORE A SEGMENTI
   -------------------------------------------------------------------------
   Il «Tipo di account» di /registrati era l'unico comando del sito con questo
   aspetto: la voce scelta usciva rosa chiarissimo su testo bordeaux, con un
   alone colorato sotto, dentro una pista grigia — cioe' un riquadro pieno
   dentro un riquadro pieno, e la voce scelta si distingueva appena da quella
   non scelta. Era anche l'ultima regola di componente scritta dentro il
   <style> della pagina.

   Qui diventa un comando come gli altri: la pista e' solo un filo, i segmenti
   sono piatti, e quello attivo e' pieno di marchio con il testo in negativo —
   la stessa coppia che usano i pulsanti primari. Legge in entrambi i temi
   perche' sono tutti token.
   ========================================================================= */
html body.nedate-ui-standard[class][class][class] .register-page__type-shell {
  gap: 0 !important;
  padding: 4px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-control-r, 10px) !important;
  background: var(--sw-surface) !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard[class][class][class] .register-page__type-row {
  gap: 4px !important;
}
html body.nedate-ui-standard[class][class][class] .register-page__type-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  min-height: calc(var(--sw-control-h-lg, 52px) - 10px) !important;
  padding-inline: .75rem !important;
  border: 0 !important;
  border-radius: calc(var(--sw-control-r, 10px) - 4px) !important;
  background: transparent !important;
  /* I segmenti sono <label>, e le etichette le decide una regola con tre id
     (`#app3d > main :is(label, .form-label)`): nessun selettore a classi la
     batte. Si vince ridichiarando qui i token che quella regola legge — le
     proprieta' personalizzate si ereditano, la specificita' non c'entra. */
  --sw-ink-label: var(--sw-muted);
  --sw-label-fs: var(--sw-control-fs, 15px);
  --sw-label-weight: var(--sw-weight-semibold, 600);
  color: var(--sw-muted) !important;
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-semibold, 600) !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--sw-dur-fast, .15s) var(--sw-ease, ease),
              color var(--sw-dur-fast, .15s) var(--sw-ease, ease) !important;
}
html body.nedate-ui-standard[class][class][class] .register-page__type-btn > i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  /* le icone portano `me-2` dal markup: lo spazio lo da' il `gap` */
  margin-right: 0 !important;
  font-size: 1.05em !important;
}
html body.nedate-ui-standard[class][class][class] .register-page__type-btn:hover {
  --sw-ink-label: var(--sw-ink);
  background: var(--sw-brand-50) !important;
  color: var(--sw-ink) !important;
}
html body.nedate-ui-standard[class][class][class] .btn-check:checked + .register-page__type-btn,
html body.nedate-ui-standard[class][class][class] .btn-check:checked + .register-page__type-btn:hover {
  --sw-ink-label: var(--sw-on-brand);
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  box-shadow: none !important;
  filter: none !important;
}
html body.nedate-ui-standard[class][class][class] .btn-check:focus-visible + .register-page__type-btn {
  outline: 2px solid var(--sw-brand-500) !important;
  outline-offset: 2px !important;
}

/* =========================================================================
   54. /SPEDIZIONI — LE STESSE DISTANZE E UNA CARD SOLA
   -------------------------------------------------------------------------
   Due cose la facevano leggere come un'altra applicazione:

   1. le grondaie. Il contenuto partiva da 35px invece dei 66 di ogni altra
      pagina, perche' il guscio e' un `container-fluid` senza il contenitore
      interno che le altre pagine hanno. Qui la misura viene ricostruita:
      spazio del guscio piu' il tetto di --sw-container-wide, che a 1280
      da' 66 e a 1920 da' 240, cioe' gli stessi numeri di /tracking;

   2. la card dentro la card. `.shipping-card` e' un contenitore, non una
      scheda: dentro ci sono gia' le card dei passaggi. Aveva superficie,
      bordo e ombra sue, quindi ogni passaggio era un rettangolo dentro un
      rettangolo. Adesso e' solo impaginazione.
   ========================================================================= */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) {
  /* La grondaia la decide una regola di nedate-unified.css con due id e dieci
     classi: a parita' di peso non la batte nulla di scrivibile qui. Si vince
     ridichiarando il token che quella regola legge — `--sw-shell-gutter`, che
     era rimasto senza valore e cadeva sul 35px di ripiego. */
  --sw-shell-gutter: calc(var(--sw-gutter) + 35px);
  padding-left: calc(var(--sw-gutter) + 35px) !important;
  padding-right: calc(var(--sw-gutter) + 35px) !important;
}
/* Sotto i 992px la grondaia larga non ha senso: il modulo e' gia' stretto e i
   campi finivano a 175px, con etichette e valori tagliati a meta' parola. */
@media (max-width: 959.98px) {
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) {
    --sw-shell-gutter: var(--sw-gutter);
    --shipping-page-left: var(--sw-gutter);
    --shipping-page-right: var(--sw-gutter);
    padding-left: var(--sw-gutter) !important;
    padding-right: var(--sw-gutter) !important;
  }
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .shipping-card .card-body {
    padding-inline: 1rem !important;
  }
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) > :is(.shipping-hero-panel, .shipping-main-grid, .alert) {
  max-width: var(--sw-container-wide, 1440px) !important;
  margin-inline: auto !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .shipping-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .shipping-card > .container {
  max-width: none !important;
  padding-inline: 0 !important;
}

/* L'intestazione dei passaggi: titolo a sinistra, azioni a destra. Con le
   etichette in italiano le tre azioni non entrano piu' sulla stessa riga del
   titolo, e comprimevano il titolo su due righe. Adesso e' il gruppo delle
   azioni ad andare a capo, intero, sotto al titolo. */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .card-body > .d-flex:has(.shipping-step-actions) {
  flex-wrap: wrap !important;
  row-gap: .85rem !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .shipping-step-actions {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .card-body > .d-flex:has(.shipping-step-actions) > div:first-child {
  flex: 1 1 16rem !important;
  min-width: 0 !important;
}

/* Le tendine con etichetta flottante tagliavano il valore: la casella e' alta
   56px come ogni altro controllo, ma l'etichetta occupa la meta' superiore e
   al valore restavano poche spanne. Qui la casella cresce quanto serve e il
   valore si allinea sotto l'etichetta, come sui campi di /accedi. */
/* Altezza dei campi: 58px, la stessa di /accedi e /tracking. Qui se ne
   contavano quattro diverse sulla stessa pagina — 65, 63, 53 e 51 — ed erano
   tutte piu' alte del resto del sito. Il valore sta in un token, cosi' campi
   e tendine non possono piu' scollarsi fra loro. */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) {
  --ship-field-h: 58px;
  /* I quattro campi delle misure stanno in un `.nd-input-addon-group` (campo
     piu' chip dell'unita'), che ha una sua altezza: 51px, sette in meno del
     resto. Ridichiarare qui i due token che quelle regole leggono li allinea
     senza toccare l'area riservata, dove la misura resta quella di prima. */
  --nd-addon-height: var(--ship-field-h);
  --nd-form-standard-floating-height: var(--ship-field-h);
  /* Cornice e fondo dei campi: le regole di pagina leggono questi tre token
     con dentro dei ripieghi loro — bordo rgba(20,39,74,.14), fondo bianco al
     94% e un'ombra sotto ogni campo. Ridichiarati qui prendono i valori del
     sistema, gli stessi del preventivo in home. */
  --nd-form-standard-border: var(--sw-field-border);
  --nd-form-standard-bg: var(--sw-field-bg, #fff);
  --nd-form-standard-shadow: none;
}
/* Ritmo interno copiato dai campi del preventivo in home: 26px sopra, 16 ai
   lati, 8 sotto. Su /spedizioni erano 30 / 13,3 / 10,9 — vicini ma diversi,
   e si vedeva mettendo le due pagine una accanto all'altra. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > :is(.form-select, .form-control):not(textarea):not(.sw-codefield) {
  /* la textarea no: e' l'unico campo che deve poter crescere, e la regola
     subito sotto le da' la sua altezza. Sul guscio di /spedizioni non si
     notava — li' l'unica textarea sta fuori da un `.form-floating` — ma
     appena queste regole sono uscite dal guscio, il campo del messaggio di
     /contact-us si e' schiacciato a 58px. */
  height: var(--ship-field-h) !important;
  min-height: var(--ship-field-h) !important;
  padding: 26px 16px 8px 16px !important;
  line-height: 1.25 !important;
  /* il testo dei campi era spaziato di 1,1px: le parole uscivano larghe
     rispetto a quelle degli stessi campi in home, dove la spaziatura e'
     quella naturale del carattere */
  letter-spacing: normal !important;
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  font-family: var(--sw-font-body, "IBM Plex Sans") !important;
}
/* (le icone dentro i campi sono state tolte: nessun rientro da tenere) */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > .form-select {
  padding-right: 2.6rem !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > .form-select {
  padding-right: 2.4rem !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) :is(.form-control, .form-select):not(textarea):not(.sw-codefield):not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--ship-field-h) !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) textarea.form-control {
  min-height: calc(var(--ship-field-h) * 1.6) !important;
}
/* L'etichetta sta sempre in alto e sotto compare il testo guida — come il
   preventivo in home, /accedi e /tracking. Bootstrap la tiene invece in mezzo
   alla casella finche' il campo e' vuoto: era l'ultima differenza visibile
   mettendo le due pagine una accanto all'altra. */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > label {
  /* Scatola e interlinea: erano l'ultima cosa che il guscio della pagina
     riceveva da un vecchio blocco di `shipping/late.css` scritto per
     `.shipping-login-page` — `display: flex`, `align-items: center`,
     `line-height: 1`. Quel blocco conosce solo il guscio: la vista a tutto
     schermo e la finestra della rubrica ne restavano fuori e la loro
     etichetta, da blocco con interlinea 1,25, sedeva 2,75px piu' in basso.
     Sono tre dichiarazioni, e stanno qui perche' qui le leggono tutti e tre. */
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  /* Il rientro a sinistra somma la cornice del campo: l'etichetta sta sul
     guscio, che cornice non ne ha, mentre il valore comincia dopo il filo del
     campo. Con lo stesso numero per tutti e due l'etichetta restava un pixel
     piu' a sinistra del valore — su /spedizioni lo fa gia' lo script che
     allinea i rientri, questa riga lo estende a ogni altra pagina. */
  padding: 9px 16px 0 calc(var(--sw-field-pad-x, 16px) + var(--sw-field-edge, 1px)) !important;
  transform: none !important;
  opacity: 1 !important;
  font-size: var(--sw-label-fs, 11px) !important;
  font-weight: var(--sw-label-weight, 600) !important;
  letter-spacing: .44px !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: var(--sw-ink-label, #617087) !important;
  pointer-events: none !important;
  transition: none !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > label::after {
  display: none !important;
}
/* Bootstrap rende trasparente il testo guida perche' nel suo motivo l'etichetta
   sta in mezzo alla casella. Qui l'etichetta e' in alto, quindi il testo guida
   torna visibile — ed e' quello che si vede sul preventivo in home. */
/* Il testo guida: in home e' 14px, spaziatura normale, grigio. Su /spedizioni
   usciva a 12,6px con -0,5px di spaziatura — lettere schiacciate, l'«effetto»
   che si vedeva sotto l'etichetta — e con `color` trasparente, cioe' disegnato
   solo dal `-webkit-text-fill-color`. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > :is(.form-control, .form-select, .log-input)::placeholder {
  color: var(--sw-placeholder-ink, var(--sw-muted)) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--sw-placeholder-ink, var(--sw-muted)) !important;
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  letter-spacing: normal !important;
  font-family: var(--sw-font-body, "IBM Plex Sans") !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating:has(> .bi, > i[class*="bi-"]) > label {
  padding-left: 2.85rem !important;
}
/* (le icone dentro i campi non ci sono piu': niente rientro da compensare) */
/* «Spedizione 1» era l'ultimo sottotitolo rosso: i titoli sono inchiostro, il
   rosso resta al numero del passaggio e alle azioni. */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .parcel-block > .d-flex .fw-semibold {
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display, "Archivo") !important;
  font-size: var(--sw-text-base, 1rem) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .parcel-block .parcel-n {
  color: var(--sw-brand-600) !important;
}

/* L'etichetta flottante del campo nazione finiva sopra al valore: il widget
   select2 disegna il testo a meta' altezza e non lascia posto in alto come
   fanno gli altri campi. Qui l'etichetta sale e il valore scende. */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-floating > label {
  top: .1rem !important;
  padding-top: 9px !important;
  transform: none !important;
  opacity: 1 !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-floating .select2-selection--single {
  align-items: flex-end !important;
  padding-bottom: .55rem !important;
}

/* La tendina delle nazioni dentro le schede mittente/destinatario: il testo
   e' piu' lungo dello spazio e usciva tagliato a meta' parola. Qui il valore
   si accorcia con i puntini invece di sbordare. */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) :is(.sender-box, .receiver-box, .pickup-box-full) .form-floating > .form-select {
  padding-right: 2.2rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Il campo nazione e' un select2: disegna una sua scatola al posto della
   tendina, e restava piu' bassa e disallineata rispetto al campo accanto.
   Qui prende la stessa altezza, lo stesso raggio e lo stesso ritmo interno
   degli altri campi della scheda. */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating.select2-floating {
  position: relative !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-container--default .select2-selection--single {
  display: flex !important;
  align-items: flex-end !important;
  min-height: var(--ship-field-h, 58px) !important;
  height: var(--ship-field-h, 58px) !important;
  padding: 26px 2.4rem 8px 16px !important;
  border: 1px solid var(--sw-field-border) !important;
  border-radius: var(--sw-control-r, 10px) !important;
  /* era rgba(255,255,255,.94) con un'ombra sua e il raggio a 9: la cornice
     del campo e' una sola in tutto il sito */
  background: var(--sw-field-bg, #fff) !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-container--default .select2-selection--single .select2-selection__rendered {
  /* e' un elemento flex: senza min-width:0 non si accorcia e i puntini di
     sospensione non entrano mai in gioco, il testo esce tagliato di netto */
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  /* 15/500 come ogni altro campo della pagina. In home il paese e' 13,1/700,
     ma li' e' un caso a se': qui lo renderebbe l'unico campo in grassetto. */
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  color: var(--sw-ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  right: .6rem !important;
  transform: translateY(-50%) !important;
  height: auto !important;
}

/* Nazione e citta' dentro le schede mittente/destinatario: la colonna e' larga
   circa 345px, quindi meta' ciascuna lasciava al menu delle nazioni ~140px e
   «Scegli una nazione» usciva tagliato — il widget select2 disegna il suo
   testo e non si accorcia con i puntini. Su una riga ciascuno il campo ha
   tutta la larghezza della scheda e il problema non si pone.

   Cognome e nome sono l'eccezione: sono due parole corte, stanno comode a
   meta' riga anche quando la scheda scende a 310px, e vanno lette insieme.
   Portano gia' una classe loro nel markup, quindi l'eccezione e' esatta e non
   tocca nessun altro campo. Scritta senza, la regola prendeva ogni colonna
   della riga — e in queste schede tutti i campi stanno in una riga sola. */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) :is(.sender-box, .receiver-box, .pickup-box-full) .row:has(> [class*="col-"] .country-select) > [class*="col-"]:not(.sender-box-private):not(.receiver-box-private) {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* I due pulsanti tondi nelle schede mittente/destinatario restavano bianchi in
   tema scuro: sono gli stessi comandi dell'intestazione del passaggio 1 (stesso
   id, ripetuto — vedi nota nel registro) ma con `.btn-rounded`, che non era
   coperta da nessuna regola di tema. Qui seguono i token come gli altri. */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .btn-rounded:not(.btn-primary):not(.btn-primary-custom) {
  border: 1px solid var(--sw-line) !important;
  background: var(--sw-surface) !important;
  color: var(--sw-ink) !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .btn-rounded:not(.btn-primary):not(.btn-primary-custom) > i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .btn-rounded.btn-primary {
  border: 0 !important;
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
}

/* I numeri dei passaggi di /registrati in tema scuro uscivano grigio-azzurri
   sul bollino rosso — 1,83:1. Il token era gia' giusto (`--sw-on-brand`), ma
   il `color` veniva riscritto piu' in la' da una regola generica sugli span
   dell'area scura. Qui il bollino decide il colore del suo numero. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.register-refresh-steps, .shipping-help-card) span:not([class]) {
  color: var(--sw-on-brand, #fff) !important;
  -webkit-text-fill-color: var(--sw-on-brand, #fff) !important;
}

/* =========================================================================
   55. /SPEDIZIONI — PAESE E CITTA' A SCHERMO INTERO SU MOBILE
   -------------------------------------------------------------------------
   Stesso schema del preventivo in home: barra in alto con il campo di ricerca
   e la X, risultati sotto a tutta altezza. Qui i due controlli sono diversi —
   il paese e' un widget select2, la citta' un autocomplete nostro — ma la
   vista e' la stessa, cosi' chi compila da telefono trova lo stesso gesto.
   ========================================================================= */
@media (max-width: 959.98px) {
  /* --- la citta': il campo viene spostato dentro questo pannello --- */
  html body.nedate-ui-standard .ship-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: none;
    flex-direction: column;
    background: var(--sw-surface) !important;
  }
  html body.nedate-ui-standard .ship-sheet.is-open { display: flex !important; }

  html body.nedate-ui-standard .ship-sheet__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--sw-line);
    background: var(--sw-surface);
  }
  html body.nedate-ui-standard .ship-sheet__field {
    flex: 1 1 auto;
    min-width: 0;
  }
  html body.nedate-ui-standard .ship-sheet__field > .form-floating { width: 100% !important; }

  html body.nedate-ui-standard .ship-sheet__body { flex: 1 1 auto; overflow: auto; }

  /* il menu dei risultati riempie lo schermo invece di galleggiare sotto al campo */
  html body.nedate-ui-standard .ship-sheet .city-dd {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 72px !important;
    bottom: 0 !important;
    width: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: auto !important;
  }
  html body.nedate-ui-standard .ship-sheet .city-dd .item {
    padding: .95rem 1rem !important;
    border-bottom: 1px solid var(--sw-line) !important;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* --- il pulsante di chiusura, uguale per i due --- */
  html body.nedate-ui-standard :is(.ship-sheet__close, .select2-search .ship-sheet__close) {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--sw-line) !important;
    border-radius: var(--sw-control-r, 10px) !important;
    background: var(--sw-surface) !important;
    color: var(--sw-ink) !important;
    font-size: 1.05rem;
  }

  /* --- il paese: il pannello di select2 a tutto schermo --- */
  html.ship-country-sheet body.nedate-ui-standard .select2-container--open .select2-dropdown {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--sw-surface) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 2147483000 !important;
  }
  html.ship-country-sheet body.nedate-ui-standard .select2-container--open .select2-search--dropdown {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .65rem .75rem !important;
    border-bottom: 1px solid var(--sw-line) !important;
  }
  html.ship-country-sheet body.nedate-ui-standard .select2-container--open .select2-search__field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: var(--sw-control-h-lg, 56px) !important;
    padding: 0 .9rem !important;
    border: 1px solid var(--sw-field-border) !important;
    border-radius: var(--sw-control-r, 10px) !important;
    background: var(--sw-field-bg, #fff) !important;
    color: var(--sw-ink) !important;
    font-size: var(--sw-control-fs, 15px) !important;
  }
  html.ship-country-sheet body.nedate-ui-standard .select2-container--open .select2-results,
  html.ship-country-sheet body.nedate-ui-standard .select2-container--open .select2-results__options {
    flex: 1 1 auto !important;
    max-height: none !important;
    height: auto !important;
    overflow: auto !important;
  }
  html.ship-country-sheet body.nedate-ui-standard .select2-container--open .select2-results__option {
    padding: .95rem 1rem !important;
    border-bottom: 1px solid var(--sw-line) !important;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  /* la pagina sotto non scorre mentre la vista e' aperta */
  html.ship-sheet-open, html.ship-country-sheet { overflow: hidden !important; }
}

/* =========================================================================
   56. /SPEDIZIONI — L'UNITA' (kg, cm) COME SUL PREVENTIVO IN HOME
   -------------------------------------------------------------------------
   Misurato sui due moduli: in home l'unita' e' una parola piccola, grigia e
   leggera appoggiata in alto a destra, alla stessa altezza dell'etichetta.
   Su /spedizioni era in mezzo al campo, in grassetto, color inchiostro e con
   un fondo bianco suo — sembrava un pulsante attaccato al campo invece della
   coda della misura.

         home                    /spedizioni (prima)
     13px / 500              13,3px / 700
     rgb(97,112,135)         rgb(11,25,55)
     fondo trasparente       bianco al 94%
     in alto                 centrata
   ========================================================================= */
/* Il prefisso a quattro id e' quello che il file usa gia' per le regole che
   devono battere la famiglia «nucleare» di nedate-unified.css: con la prova
   del marcatore si e' visto che la regola arrivava, ma colore, peso e fondo
   li riscriveva qualcosa di piu' pesante. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) :is(.input-unit, .ship-dim-unit, .input-group-text) {
  display: flex !important;
  /* Misurato sul preventivo in home: l'unita' e' centrata sull'altezza del
     campo (il suo testo cade a meta' scatola), non appoggiata in alto come
     avevo letto dalla schermata. */
  align-items: center !important;
  padding: 0 16px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: 13px !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1 !important;
}

/* La cornice passa dal campo al gruppo, come `.log-input-group` in home:
   prima il bordo del campo finiva dove cominciava l'unita' e la scatola
   restava aperta a destra. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .nd-input-addon-group {
  display: flex !important;
  align-items: stretch !important;
  /* `min-height` da sola non bastava: il campo dentro e' alto 58px e i due
     fili del gruppo si sommavano, quindi la riga di peso e misure usciva 60px
     contro i 58px di ogni altro campo. Fissata l'altezza, il campo dentro si
     stende e il totale torna in riga. */
  height: var(--ship-field-h, 58px) !important;
  min-height: var(--ship-field-h, 58px) !important;
  border: 1px solid var(--sw-field-border) !important;
  border-radius: var(--sw-control-r, 10px) !important;
  background: var(--sw-field-bg, #fff) !important;
  overflow: hidden !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .nd-input-addon-group > .form-floating {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .nd-input-addon-group > .form-floating > .form-control {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-right: .5rem !important;
}
/* il fuoco accende la cornice del gruppo, non quella del campo dentro */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .nd-input-addon-group:focus-within {
  border-color: var(--sw-brand-500) !important;
  box-shadow: var(--sw-focus-ring) !important;
}

/* =========================================================================
   57. /SPEDIZIONI — L'ETICHETTA NON SI MUOVE PIU'
   -------------------------------------------------------------------------
   Misurato: a campo vuoto l'etichetta ha `transform: none`, a campo pieno
   `matrix(0.78, 0, 0, 0.78, 0, -7)` — cioe' rimpicciolita al 78% e alzata di
   7px. E' il motivo per cui, riempiendo «larghezza», la sua etichetta
   diventava piu' piccola di quella di «profondita'» ancora vuota: due campi
   affiancati con l'etichetta di due misure diverse.

   E' l'animazione dell'etichetta flottante di Bootstrap, che agisce in tre
   stati (fuoco, campo pieno, riempimento automatico) con regole piu' pesanti
   di quella di base. In home l'etichetta sta ferma: qui fa lo stesso.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > :is(.form-control, .form-select):focus ~ label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > :is(.form-control, .form-select):not(:placeholder-shown) ~ label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > .form-control:-webkit-autofill ~ label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > .form-select ~ label {
  transform: none !important;
  scale: none !important;
  translate: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  font-size: var(--sw-label-fs, 11px) !important;
  height: auto !important;
  padding-top: 9px !important;
  padding-bottom: 0 !important;
}

/* In home l'asterisco del campo obbligatorio ha uno spazio davanti
   («PESO *»), qui era attaccato («PESO*»). Lo stacco lo mette il margine,
   cosi' vale anche dove il markup non ha lo spazio. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > label > .text-danger {
  margin-left: .3em !important;
}

/* =========================================================================
   58. /SPEDIZIONI — VIA LE SCATOLE DENTRO LE SCATOLE
   -------------------------------------------------------------------------
   Cercate scorrendo il documento: ogni elemento con fondo, bordo e raggio
   contenuto in un altro con fondo, bordo e raggio. Ne restavano tre.

   1. il gruppo dei pulsanti «Aggiungi articolo / Clona spedizione» era un
      rettangolo grigio bordato attorno a due pulsanti gia' bordati;
   2. ogni riga «Spedizione n» aveva un riquadro completo dentro la card;
   3. il guscio `.shipping-card` dipingeva ancora superficie e ombra sotto
      alle card dei passaggi (corretto piu' su, §54).
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .btn-group {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* le righe dei colli: una linea che separa, non una scatola dentro la card */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .parcel-block {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) .parcel-block + .parcel-block {
  margin-top: 1.35rem !important;
  padding-top: 1.35rem !important;
  border-top: 1px solid var(--sw-line) !important;
}

/* L'intestazione di una card, in tema scuro, prendeva una superficie sua:
   una fascia colorata dentro una card gia' colorata — il titolo con lo
   sfondo innestato che avevamo tolto da /tracking. In `nedate-design-system`
   la stessa lista e' ripetuta in piu' punti con pesi diversi (fino a
   0,14,3), quindi la correzione sta qui, in fondo al file che carica per
   ultimo. La superficie e' quella della card: a separare basta il filo. */
html:not(#_):not(#__):not(#___):not(#____) :is(html[data-theme="dark"], html[data-bs-theme="dark"], body.dark-mode) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.card-header, .card-footer),
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.card-header, .card-footer) {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--sw-line) !important;
}

/* Il pallino con la lampadina di «Come funziona» aveva il vetro bianco su un
   fondo arancio chiarissimo: 1:1, cioe' invisibile. Prende i colori del
   riquadro icona che usiamo ovunque — glifo di marchio su fondo brand-50. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) :is(.shipping-help-card, .shipping-secure-card) h3 > span {
  background: var(--sw-brand-50) !important;
  border: 1px solid var(--sw-brand-100) !important;
  color: var(--sw-brand-600) !important;
  /* il pallino aveva il riempimento del testo bianco: `inherit` sul glifo
     ereditava quel bianco, non il colore. Va messo il valore, non l'eredita'. */
  -webkit-text-fill-color: var(--sw-brand-600) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) :is(.shipping-help-card, .shipping-secure-card) h3 > span > i {
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
}

/* =========================================================================
   59. L'ETICHETTA FERMA, OVUNQUE SIA IL CAMPO
   -------------------------------------------------------------------------
   Le regole precedenti erano agganciate al guscio della pagina, e bastava che
   il campo finisse altrove — dentro la vista a schermo intero, dentro una
   finestra modale — perche' l'animazione di Bootstrap tornasse viva.

   Qui l'aggancio e' la classe del <body> della pagina: il campo puo' stare
   dove vuole nel documento, l'etichetta non si muove. Sono elencati tutti e
   quattro gli stati che Bootstrap usa per far salire l'etichetta.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard.nedate-app-standard[class][class][class][class][class][class][class][class] :is(.form-floating, .select2-floating) > label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard.nedate-app-standard[class][class][class][class][class][class][class][class] :is(.form-floating, .select2-floating) > :is(.form-control, .form-select):focus ~ label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard.nedate-app-standard[class][class][class][class][class][class][class][class] :is(.form-floating, .select2-floating) > :is(.form-control, .form-select):not(:placeholder-shown) ~ label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard.nedate-app-standard[class][class][class][class][class][class][class][class] :is(.form-floating, .select2-floating) > .form-control:-webkit-autofill ~ label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard.nedate-app-standard[class][class][class][class][class][class][class][class] :is(.form-floating, .select2-floating) > .form-select ~ label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard.nedate-app-standard[class][class][class][class][class][class][class][class] :is(.form-floating, .select2-floating):focus-within > label {
  transform: none !important;
  scale: none !important;
  translate: none !important;
  rotate: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  font-size: var(--sw-label-fs, 11px) !important;
  height: auto !important;
  top: 0 !important;
  bottom: auto !important;
}

/* =========================================================================
   60. /SPEDIZIONI — LA FASCIA GRIGIA FRA UNA CARD E L'ALTRA
   -------------------------------------------------------------------------
   Campionando i pixel: fra la card di un passaggio e quella dopo restava una
   striscia di 12px a rgb(247,248,249) — piu' scura del fondo della pagina,
   rgb(251,252,255). Non era un fondo: erano le ombre delle due card che si
   incontravano nello spazio stretto fra loro, sommandosi.

   Le card qui stanno una sotto l'altra e hanno gia' il loro filo: l'ombra non
   aggiunge niente e sporca lo spazio fra una e l'altra. Tolta.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) :is(.card, .nedate-section-card, .sticky-summary, .shipping-help-card, .shipping-secure-card, .sender-box, .receiver-box) {
  box-shadow: none !important;
}


/* =========================================================================
   61. IL SELETTORE DEL PAESE SCRIVE COME IL CAMPO DI TESTO ACCANTO
   -------------------------------------------------------------------------
   "Nazione mittente" e "Citta' o CAP del mittente" stanno affiancati e
   devono leggersi come due caselle dello stesso modulo. Misurando, non lo
   erano: il paese usciva a 14px con 1.1px di spaziatura fra le lettere e il
   nome in peso 300, il campo di testo a 15px, spaziatura normale, peso 500.
   Erano numeri fotografati a mano da un vecchio computed, non token.

   Qui il valore del widget prende gli stessi token dei controlli. Il rientro
   a sinistra lo da' la scatola del widget (16px, come il padding del campo di
   testo), quindi la parte interna parte da zero: sommandoli il nome del paese
   partiva 17px piu' a destra del testo accanto.

   La pillola col codice ISO ("IT") non esiste sul preventivo in home — li' la
   riga e' bandiera + nome — e non c'e' piu' nemmeno qui: e' tolta dal
   renderer, questa regola copre le viste che la disegnassero ancora.

   Le righe dell'elenco (`.country-option` e compagnia) non stanno piu' in
   questa regola: le veste `public/css/sw-place-field.css`, che fa lo stesso
   lavoro per le tendine di /welcome, /spedizioni e /registrati. Qui restava
   solo il peso 300, e bastava a far uscire l'elenco di /registrati in un peso
   diverso dai suoi due gemelli (misurato: 300 contro 500).
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms, .select2-dropdown.nedate-country-dropdown) :is(.select2-selection, .select2-selection__rendered, .select2-selection__placeholder) {
  font-family: var(--theme-font-base, "IBM Plex Sans", Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif) !important;
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-light, 300) !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms, .select2-dropdown.nedate-country-dropdown) .country-option-code {
  display: none !important;
}

/* Il rientro viene dalla scatola: dentro si riparte da zero. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-selection__rendered {
  padding-left: 0 !important;
}

/* Il testo guida del widget e' testo guida come gli altri: stessi 14px grigi
   del `::placeholder` dei campi di testo, non il peso del valore scelto. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms, .select2-dropdown.nedate-country-dropdown) :is(.select2-selection__placeholder, .country-option--empty) {
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-light, 300) !important;
  color: var(--sw-placeholder-ink, var(--sw-muted)) !important;
  -webkit-text-fill-color: var(--sw-placeholder-ink, var(--sw-muted)) !important;
}

/* =========================================================================
   62. /SPEDIZIONI — LO STESSO PASSO FRA TUTTE LE CARD
   -------------------------------------------------------------------------
   Misurando i pixel fra un bordo e l'altro: 14px fra tutte le card dei
   passaggi, ma solo 5px sotto il blocco mittente/destinatario, perche' quelle
   due non sono figlie dirette di #shippingForm e cadevano su una regola di
   `main.css` che da' `.shipping-card .card { margin-bottom: .3rem }` — 4,2px.
   Il passo della pagina e' 1rem, lo stesso che l'utilita' `mb-3` mette su
   tutte le altre: qui viene ripristinato. Vale anche sul telefono, dove le due
   schede stanno una sotto l'altra e fra loro c'era lo stesso salto.
   ========================================================================= */
html body.nedate-ui-standard[class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields) :is(.card.sender-box, .card.receiver-box, .pickup-box-full > .card) {
  margin-bottom: 1rem !important;
}

/* =========================================================================
   63. /SPEDIZIONI — TUTTI I CAMPI SULLA STESSA GRIGLIA
   -------------------------------------------------------------------------
   Misurati tutti e 34 i campi della pagina contro i primi quattro (nazione e
   citta' di mittente e destinatario). Erano gia' allineati su quasi tutto —
   altezza 58px, raggio 10px, filo 1px, etichetta 11/600 a 17px dal bordo
   sinistro e 8-9px da quello alto, testo a 17px — e restavano tre scarti.

   1. Il valore del widget del paese dentro le schede mittente/destinatario
      cadeva 6,4px piu' in basso che nei primi due campi: la scatola e' un
      flex appoggiato in fondo (`align-items: flex-end`) e il rientro verticale
      glielo dava un padding interno che li' non c'era. Lo stesso rientro dei
      due campi di riferimento viene ora applicato a tutti i widget della
      pagina, cosi' la riga del paese cade sempre allo stesso posto.
   2. Un <select> fermo sull'opzione vuota sta mostrando un testo guida, non
      una scelta: «Scegli una data di ritiro» usciva in inchiostro a 15px
      mentre «Scegli una nazione» era grigio a 14px. La pseudo-classe :has()
      riconosce quello stato e lo segue, quindi torna inchiostro appena si
      sceglie davvero.
   3. I gruppi peso/altezza/larghezza/profondita' erano alti 60px invece di
      58 (corretto alla fonte, in `late.css`).
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-selection__rendered {
  padding-top: 15px !important;
  padding-bottom: 6.44px !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) select.form-select:has(> option[value=""]:checked) {
  color: var(--sw-placeholder-ink, var(--sw-muted)) !important;
  -webkit-text-fill-color: var(--sw-placeholder-ink, var(--sw-muted)) !important;
  font-size: var(--sw-control-fs, 15px) !important;
}

/* In tema scuro le etichette uscivano in tre grigi diversi (campi di testo,
   menu nativi, widget del paese) e il filo del widget era piu' chiaro di
   quello degli altri campi: tutti sullo stesso token. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) :is(.form-floating, .select2-floating) > label {
  color: var(--sw-ink-label) !important;
  -webkit-text-fill-color: var(--sw-ink-label) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) :is(.select2-container--default .select2-selection--single, .select2-selection--single) {
  /* i campi di testo leggono `--nd-form-standard-border`, il widget leggeva
     `--sw-field-border`: in chiaro coincidono, in scuro no e il filo del paese
     usciva di un altro grigio. Il token viene risolto **sul contenitore della
     pagina** — dove vale quello dei campi di testo — e da li' scende fino al
     widget: dentro il widget la stessa variabile e' ridichiarata, quindi
     leggerla sul posto avrebbe ridato il valore sbagliato. */
  border-color: var(--sw-field-border-live, var(--sw-field-border)) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) {
  --sw-field-border-live: var(--nd-form-standard-border, var(--sw-field-border));
}

/* In tema scuro i campi di testo ridichiarano il token del filo **su se
   stessi** (`--spedire-border`), il widget del paese no: per questo restava di
   un grigio diverso. Stessa catena, stesso filo. */
html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) :is(.select2-container--default .select2-selection--single, .select2-selection--single),
html[data-bs-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) :is(.select2-container--default .select2-selection--single, .select2-selection--single),
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) :is(.select2-container--default .select2-selection--single, .select2-selection--single) {
  border-color: var(--spedire-border, #334155) !important;
}

/* =========================================================================
   64. /CONTATTI — MOBILE FLAT COME /TRACKING
   -------------------------------------------------------------------------
   Navbar da 56px + 15px di respiro, un solo gutter laterale da 1.25rem e
   nessuna card contenitore. Il modulo e le informazioni restano completi;
   il desktop non cambia.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #contactPage.contact-login-page {
    display: block !important;
    min-height: 0 !important;
    padding: calc(56px + 15px + env(safe-area-inset-top, 0px)) 0 1.5rem !important;
    background-color: var(--sw-surface) !important;
    background-image: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #contactPage .contact-login-inner {
    min-height: 0 !important;
    padding-inline: 1.25rem !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #contactPage .contact-login-grid {
    --bs-gutter-y: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #contactPage :is(.contact-login-form-shell, .contact-login-card) {
    max-width: none !important;
    width: 100% !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #contactPage .contact-login-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #contactPage .contact-login-trust {
    display: block !important;
    width: 100% !important;
    margin: 1.5rem auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #contactPage .contact-login-trust > div {
    width: 100% !important;
    min-height: 64px !important;
    padding: .75rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sw-line) !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #contactPage .contact-login-trust > div:last-child {
    border-bottom: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class] #contactPage .contact-login-trust small {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* =========================================================================
   65. /SPEDIZIONI — FRAME E PASSO DELLE CARD SU MOBILE
   -------------------------------------------------------------------------
   La prima card parte subito dopo la navbar mobile da 56px. Le card corrono a
   filo schermo, senza bordi verticali; mantengono 5px fra loro e quelle che
   contengono controlli conservano una superficie piena e leggibile.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper.shipping-login-page {
    --sw-shell-gutter: 0px;
    --shipping-page-left: 0px;
    --shipping-page-right: 0px;
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page > .shipping-hero-panel {
    margin-bottom: 5px !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page > .shipping-main-grid {
    --bs-gutter-y: 0 !important;
    margin-top: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page > .shipping-main-grid > [class*="col-"] {
    margin-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page #shippingForm .card {
    margin-bottom: 5px !important;
  }

  /* La card e il suo `.card-body` applicavano entrambi un padding. Togliendo
     quello esterno, numero e intestazione salgono nell'angolo utile della
     card, mentre il corpo mantiene ancora il proprio margine di sicurezza. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper.shipping-login-page #shippingForm .card.nedate-section-card {
    padding: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page > .shipping-hero-panel,
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page #shippingForm .card,
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page .shipping-summary-column > .card {
    border-right-width: 0 !important;
    border-left-width: 0 !important;
    border-radius: 0 !important;
  }

  /* La stessa ombra del cappello su ogni card: nel passo da 5px crea una
     fascia breve e uniforme che separa visivamente un blocco dal successivo. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper.shipping-login-page > .shipping-hero-panel,
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper.shipping-login-page #shippingForm .card,
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper.shipping-login-page .shipping-summary-column > .card {
    box-shadow: 0 4px 8px rgba(12, 23, 41, .05),
                0 14px 34px rgba(12, 23, 41, .09) !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page #shippingForm .card:has(:is(input:not([type="hidden"]), select, textarea)) {
    background-color: var(--sw-surface, #fff) !important;
    background-image: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page .shipping-summary-column > .card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page .shipping-summary-column > .shipping-help-card {
    margin-top: 12px !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class] .shipping-page-wrapper.shipping-login-page .shipping-summary-column > .shipping-secure-card {
    margin-top: 5px !important;
  }
}

/* =========================================================================
   65. /SPEDIZIONI — TELEFONO A TUTTA LARGHEZZA, DESKTOP PIU' RESPIRATO
   -------------------------------------------------------------------------
   Sul telefono la pagina era «quasi» a tutta larghezza: fra il bordo dello
   schermo e il campo c'erano tre rientri in fila — il margine della pagina, il
   filo della card e il padding del suo corpo — e il modulo perdeva larghezza
   utile senza guadagnare niente in leggibilita': a 390px la cornice di una
   card che occupa tutto lo schermo non racconta piu' niente.

   Stessa soluzione gia' adottata su /tracking, /tariffe e /faq: una sola
   superficie, i passaggi separati da un filo invece che incorniciati, e il
   rientro della pagina come unico margine. I campi tengono la loro cornice:
   quella serve, perche' dice dove si scrive.

   Sul desktop il modulo e' lungo e la testata si prendeva 205px prima del
   primo campo: ridotta, e in cambio le card respirano di piu' dentro.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .shipping-page-wrapper[class][class] > .container-fluid) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background-image: none !important;
    background-color: var(--sw-surface-2) !important;
  }

  /* Le superfici contenitore si tolgono di mezzo. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(.shipping-hero-panel, #shippingForm > .card, .shipping-details-card, .card.sender-box, .card.receiver-box, .sticky-summary, .shipping-help-card, .shipping-secure-card, .nedate-section-card, .shipping-card) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(.card, .shipping-hero-panel) :is(.card-body, .card-header, .card-footer) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* I passaggi sono card bianche separate da un vero spazio del canvas.
     Nessun divider: nel gap si deve vedere lo sfondo grigio della pagina. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#shippingForm > .card, .card.sender-box, .card.receiver-box) {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    background: var(--sw-surface) !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #shippingForm > .card:first-child {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* Le colonne portano mezzo passo di rientro per tenere lo spazio fra due
     campi affiancati: la riga lo restituisce al contenitore, cosi' il primo e
     l'ultimo campo arrivano fino al margine della pagina. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#shippingForm, .card-body) > .row,
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .card-body .row {
    margin-left: -0.4rem !important;
    margin-right: -0.4rem !important;
  }
}

@media (min-width: 960px) {
  /* La testata dice quello che deve in meno spazio: il primo campo sale. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-panel {
    min-height: 0 !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Card larghe mille pixel con 19px di rientro sembravano piene fino all'orlo. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#shippingForm > .card, .card.sender-box, .card.receiver-box) :is(.card-body) {
    padding: 1.7rem 1.9rem !important;
  }
}

/* =========================================================================
   66. /SPEDIZIONI — LE CORREZIONI DELLA CRITICA DESKTOP
   -------------------------------------------------------------------------
   1. Le coppie che stavano comode affiancate erano finite una per riga:
      indirizzo/civico e telefono/email tornano in coppia da 1200px in su,
      dove la scheda e' abbastanza larga. Sotto restano incolonnate, perche'
      a 992px la meta' scheda e' 145px e l'etichetta piu' lunga non ci sta.
   2. I passaggi che dicono una riga sola non devono costare una schermata.
   3. Il riquadro dei termini tagliava una riga a meta' sul bordo basso:
      altezza a multipli dell'interlinea e una sfumatura che dichiara che il
      testo continua.
   4. L'azione piu' importante della pagina era il bottone meno visibile:
      ora ha peso, sta in fondo a una banda sua e non si perde.
   5. La casella «Punto di ritiro» e' disattivata finche' non si sceglie il
      corriere: adesso lo dice, invece di sembrare rotta.
   ========================================================================= */
@media (min-width: 1200px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(.sender-box, .receiver-box, .pickup-box-full) .row > [class*="col-"]:has(input[id$="_address"]) {
    flex: 0 0 auto !important;
    width: 66.6666666667% !important;
    max-width: 66.6666666667% !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(.sender-box, .receiver-box, .pickup-box-full) .row > [class*="col-"]:has(input[id$="_house_number"]) {
    flex: 0 0 auto !important;
    width: 33.3333333333% !important;
    max-width: 33.3333333333% !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(.sender-box, .receiver-box, .pickup-box-full) .row > [class*="col-"]:has(input[id$="_phone"]),
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(.sender-box, .receiver-box, .pickup-box-full) .row > [class*="col-"]:has(input[id$="_email"]) {
    flex: 0 0 auto !important;
    width: 50% !important;
    max-width: 50% !important;
  }
}

/* 2. Stati vuoti compatti: la card non si gonfia per una riga di testo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#accessoriesCard:has(.accNoAccessoriesMsg), .shipping-courier-card:has(#carrier_results:empty)) > .card-body {
  padding-top: 1.35rem !important;
  padding-bottom: 1.35rem !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#accessoriesCard:has(.accNoAccessoriesMsg), .shipping-courier-card:has(#carrier_results:empty)) .card-sub {
  margin-bottom: .45rem !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-courier-card:has(#carrier_results:empty) #carrier_hint {
  margin-bottom: 0 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-courier-card:has(#carrier_results:empty) #carrier_results {
  margin-top: 0 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .accNoAccessoriesMsg {
  margin-top: .35rem !important;
}

/* 3. Il riquadro dei termini: niente righe tagliate a meta'. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-text-box {
  position: relative !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-text-box > #tos_text {
  height: calc(8 * 1.6em + 1.75rem) !important;
  padding-top: 1rem !important;
  line-height: 1.6 !important;
  resize: vertical !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-text-box::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 2.4rem;
  border-radius: 0 0 var(--sw-control-r, 10px) var(--sw-control-r, 10px);
  background: linear-gradient(to bottom, transparent, var(--sw-field-bg, #fff) 82%);
  pointer-events: none;
}

/* 4. L'azione finale ha il peso che le spetta. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-actions {
  margin-top: 1.5rem !important;
  padding-top: 1.35rem !important;
  border-top: 1px solid var(--sw-line) !important;
  justify-content: flex-end !important;
  overflow: visible !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-actions #btnContinue {
  min-height: 3.25rem !important;
  padding: .85rem 1.9rem !important;
  font-size: 1rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 20px rgba(217, 35, 54, .22) !important;
}

@media (max-width: 575.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-actions {
    flex-wrap: wrap !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-actions #btnContinue {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* 5. «Punto di ritiro»: disattivata, ma con il motivo scritto. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .pickup-point-option {
  position: relative !important;
  /* A destra a ogni larghezza: nel markup c'e' `ms-lg-auto`, che sul telefono
     non vale, e la casella finiva attaccata ad «Azienda». */
  margin-left: auto !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .pickup-point-option:has(> input:disabled) {
  cursor: not-allowed !important;
}

/* =========================================================================
   67. /SPEDIZIONI — TESTO CHE SEMBRA QUELLO CHE NON E'
   -------------------------------------------------------------------------
   Tre cose che il browser diceva a voce alta e che a occhio si notavano
   subito:

   1. Il riquadro dei **termini** usciva a 15px/500, cioe' con il peso del
      valore scritto in un campo: un muro di testo legale in semi-grassetto.
      E' testo da leggere, non un valore da compilare — 14px/400, interlinea
      larga, inchiostro attenuato.
   2. La riga del **consenso** era un `div` con filo, fondo bianco e ombra:
      sembrava un campo di testo con dentro una casella. Una casella di
      spunta non e' un campo: via la cornice, resta la riga.
   3. Tutte e diciassette le etichette di caselle e pallini della pagina
      («Privato», «Azienda», «Punto di ritiro», la riga del consenso…)
      uscivano a 11px/600 con la spaziatura delle **etichette di campo**.
      Ma l'etichetta di una casella non e' la didascalia di un campo: e' la
      scelta che stai leggendo. Va al corpo del testo, come il valore.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-text-box > #tos_text {
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-regular, 400) !important;
  letter-spacing: normal !important;
  line-height: 1.65 !important;
  color: var(--sw-ink-soft, var(--sw-muted)) !important;
  -webkit-text-fill-color: var(--sw-ink-soft, var(--sw-muted)) !important;
}

/* La casella di spunta non vive dentro una scatola che finge di essere un
   campo: niente filo, niente fondo, niente ombra. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-accept-option {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .terms-accept-option:is(:hover, :focus-within) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* L'etichetta di una scelta e' testo da leggere, non la didascalia di un
   campo: stessa misura e stesso peso del valore che si scrive nei campi. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) :is(.form-check-label, .form-check > label) {
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-light, 300) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.5 !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) :is(.form-check-label, .form-check > label) a {
  font-weight: var(--sw-weight-light, 300) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: .18em !important;
}

/* Disattivata: si vede che non e' disponibile, non che e' rotta. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) .form-check:has(> input:disabled) .form-check-label {
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}

/* Le voci di «Come funziona» sono testo da leggere, non titoli: uscivano a
   14px/700, cioe' quattro righe tutte in grassetto una sotto l'altra. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-help-card ol > li {
  font-weight: var(--sw-weight-regular, 400) !important;
  line-height: 1.5 !important;
}

/* =========================================================================
   68. /SPEDIZIONI — IL RIEPILOGO, DI LATO E IN FONDO
   -------------------------------------------------------------------------
   Due superfici che dicono la stessa cosa in due posti diversi: la colonna
   di destra sul desktop e la barra in fondo sul telefono. Erano il punto
   meno curato della pagina.

   **La barra del telefono** era illeggibile: il nome del corriere a 7,8px, la
   riga sotto a **5,3px**, «IVA inclusa» a 4,8px — misure che non esistono in
   nessuna scala tipografica. In tema scuro restava bianca con sopra testo
   chiaro. E al posto del logo del corriere c'era il segnaposto «no-image»,
   un quadratino grigio rotto. Rifatta: il totale e' la cosa piu' grande,
   perche' e' quello che si viene a vedere; il resto lo accompagna.

   **La colonna di destra** dava alla voce e al valore lo stesso peso (700) e
   lo stesso grigio: «Peso — » si leggeva come una riga sola, indistinta.
   Adesso la voce e' attenuata e il valore e' inchiostro, il totale ha una
   riga sopra e la misura di un totale.
   ========================================================================= */

/* ---------- colonna di destra (desktop) ---------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .shipping-summary-lines > div {
  margin-bottom: 0 !important;
  padding: .58rem 0 !important;
  border-bottom: 1px solid var(--sw-line) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .shipping-summary-lines > div:last-child {
  border-bottom: 0 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .shipping-summary-lines dt {
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .shipping-summary-lines dd {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  text-align: right !important;
}

/* L'avviso non ha bisogno di una cornice dentro una card: e' una frase. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .shipping-summary-empty-box {
  margin-bottom: .55rem !important;
  padding: 0 0 .85rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-regular, 400) !important;
  line-height: 1.5 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .estimated_total {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--sw-line) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .estimated_total .fw-semibold {
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .estimated_total .summary-total {
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
  font-size: 1.55rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}

/* Finche' il modulo e' vuoto il totale lo scrive uno pseudo-elemento e il
   testo vero («—») viene azzerato: la misura va rimessa sullo pseudo, se no
   si leggono tutti e due — «€0.00—». */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .summary_empty:not(.d-none) ~ .estimated_total .summary-total {
  font-size: 0 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .summary_empty:not(.d-none) ~ .estimated_total .summary-total::before {
  content: "€0.00";
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
  font-size: 1.55rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: -.01em !important;
}

/* ---------- barra in fondo (telefono) ---------- */
@media (max-width: 959.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar {
    padding: .5rem .9rem calc(.5rem + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--sw-line) !important;
    background: var(--sw-surface) !important;
    box-shadow: 0 -10px 26px rgba(15, 23, 42, .10) !important;
    backdrop-filter: none !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-trigger {
    height: auto !important;
    min-height: 3.9rem !important;
    max-height: none !important;
    padding: .45rem .35rem !important;
    border: 0 !important;
    border-radius: var(--sw-control-r, 10px) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-compact {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: .7rem !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Il segnaposto «no-image» e' un quadratino rotto: sparisce, e con lui la
     sua casella. Quando il corriere c'e' davvero, il logo torna. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-logo:has(img[src*="no-image"]) {
    display: none !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-logo {
    width: 2.45rem !important;
    height: 2.45rem !important;
    min-width: 2.45rem !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--sw-line) !important;
    border-radius: var(--sw-control-r, 10px) !important;
    background: var(--sw-surface) !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-logo img {
    width: 1.85rem !important;
    height: 1.85rem !important;
    object-fit: contain !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-courier {
    color: var(--sw-muted) !important;
    -webkit-text-fill-color: var(--sw-muted) !important;
    font-size: var(--sw-text-xs, 12.5px) !important;
    font-weight: var(--sw-weight-medium, 500) !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-service {
    color: var(--sw-ink) !important;
    -webkit-text-fill-color: var(--sw-ink) !important;
    font-size: var(--sw-control-fs, 15px) !important;
    font-weight: var(--sw-weight-bold, 700) !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-price {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
    text-align: right !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-price .summary-total {
    margin: 0 !important;
    color: var(--sw-brand-600) !important;
    -webkit-text-fill-color: var(--sw-brand-600) !important;
    font-size: 1.35rem !important;
    font-weight: var(--sw-weight-bold, 700) !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-price small {
    color: var(--sw-muted) !important;
    -webkit-text-fill-color: var(--sw-muted) !important;
    font-size: var(--sw-text-xs, 12.5px) !important;
    font-weight: var(--sw-weight-medium, 500) !important;
    line-height: 1.2 !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-caret {
    width: 2.3rem !important;
    height: 2.3rem !important;
    min-width: 2.3rem !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--sw-brand-50, rgba(217, 35, 54, .10)) !important;
    color: var(--sw-brand-600) !important;
    font-size: .95rem !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummaryBar .mobile-summary-caret i {
    color: var(--sw-brand-600) !important;
    -webkit-text-fill-color: var(--sw-brand-600) !important;
  }
}

/* In tema scuro il titolo del riepilogo usciva rosso mentre ogni altro titolo
   di card della pagina e' inchiostro: una sola voce fuori dal coro. */
html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .sticky-summary .card-header .display-6,
html[data-bs-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .sticky-summary .card-header .display-6,
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .sticky-summary .card-header .display-6 {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}

/* Il pittogramma dentro il bollino resta del colore del marchio: il
   `-webkit-text-fill-color` del titolo scendeva anche sullo pseudo-elemento e
   lo faceva sparire sul fondo scuro. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .sticky-summary .card-header .display-6::before {
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
}

/* Nel pannello che sale dal basso il titolo era ancora rosso maiuscolo: e' lo
   stesso riepilogo, si legge allo stesso modo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummarySheet .display-6 {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: var(--sw-text-lg, 1.125rem) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummarySheet .shipping-summary-lines > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: .58rem 0 !important;
  border-bottom: 1px solid var(--sw-line) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummarySheet .shipping-summary-lines dt {
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] #mobileSummarySheet .shipping-summary-lines dd {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  text-align: right !important;
}

/* =========================================================================
   69. /SPEDIZIONI — LA TESTATA NON E' UNA CARD
   -------------------------------------------------------------------------
   «Crea una nuova spedizione» stava dentro una scheda bianca con filo, raggio
   e ombra: le stesse identiche vesti dei passaggi del modulo. Ma non e' un
   passaggio, non si compila, non contiene niente da fare — e dichiararla
   uguale a quelle prometteva un contenuto che non c'e'. In piu' si prendeva
   185px e l'illustrazione era la cosa piu' grande e piu' satura della pagina.

   Su questa pagina la grammatica e' chiara: **le schede sono cose da fare, il
   fondo tranquillo e' la pagina**. La testata torna sul fondo della pagina —
   niente cornice — e si separa dal modulo con un filo, come si separano i
   capitoli. Il titolo puo' finalmente respirare (era compresso dentro la
   scheda), l'illustrazione resta ma torna a fare da accento a destra invece
   che da protagonista.
   ========================================================================= */
@media (min-width: 960px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-panel {
    min-height: 0 !important;
    margin-bottom: 1.35rem !important;
    padding: .1rem 0 1.5rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sw-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Il markup mette testo e illustrazione in colonna fino a 1200px: da 992 in
     su lo spazio c'e' gia', e incolonnati l'illustrazione finiva sotto il
     titolo, allineata a sinistra, a prendersi una riga per niente. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-panel > .d-flex {
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-panel h1 {
    margin-bottom: .35rem !important;
    /* La misura, l'interlinea e la spaziatura del titolo non stanno piu'
       qui: le porta `sw-hero-title`, il mattone che vestono anche la
       giacenza, la prova di consegna e le pagine del portale ospite.
       Questi valori tenevano il titolo a 30,1px contro i 36,4 delle
       sorelle (misurato). Resta il margine, che e' impaginazione. */


  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-panel p {
    max-width: 68ch !important;
    /* Idem per il testo di servizio: lo veste `sw-hero-lead` (13,1px).
       Qui era 15. */

  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-eyebrow {
    margin-bottom: .5rem !important;
    font-size: .72rem !important;
  }

  /* L'illustrazione fa da accento, non da insegna. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-visual {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 15rem !important;
    margin-right: -.5rem !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-visual img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 7.4rem !important;
    display: block !important;
    margin-left: auto !important;
  }
}

/* =========================================================================
   70. /SPEDIZIONI — LA TESTATA HA DUE MODI, NON TRE
   -------------------------------------------------------------------------
   La testata aveva tre comportamenti: piatta a tutta larghezza fino a 768px,
   di nuovo **scheda bianca con cornice** fra 768 e 992 — il vecchio aspetto
   sopravvissuto in mezzo — e intestazione di pagina da 992 in su.

   Quel gradino intermedio non serve a niente: lo spartiacque vero della
   pagina e' 992px, dove il riepilogo si mette di fianco al modulo e la
   pagina passa da una colonna a due. Sotto quella soglia e' telefono, sopra
   e' scrivania. La cornice sparisce da tutta la fascia sotto i 992: cambia
   solo la disposizione (incolonnata sotto, affiancata sopra), non il vestito.
   ========================================================================= */
@media (max-width: 959.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-panel {
    min-height: 0 !important;
    margin-bottom: 1.1rem !important;
    padding: 0 0 1.15rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sw-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-hero-panel > .d-flex {
    align-items: center !important;
  }
}

/* =========================================================================
   71. /SPEDIZIONI — FONDO DELLA PAGINA, CARD, CAMPO: TRE LIVELLI, TRE TONI
   -------------------------------------------------------------------------
   In chiaro la pagina disegnava i suoi tre livelli tutti con lo stesso
   colore: fondo #ffffff, card #ffffff, campo #ffffff. L'unico strumento per
   separarli era un filo da 1px — ed e' da li' che sono nati metà dei
   problemi di questi giorni (la fascia fra le card, le scatole dentro le
   scatole, la casella di spunta che sembrava un campo): quando l'unica
   risorsa e' il filo, si finisce ad aggiungere fili, cornici e ombre.

   Il tema scuro funzionava gia' cosi' — fondo piu' scuro, card piu' chiare —
   ed era il chiaro l'eccezione piatta. Adesso anche in chiaro:

       fondo pagina  --sw-surface-2  #f0f4f9
       card          --sw-surface    #ffffff   (e niente filo: non serve piu')
       campo         --sw-surface    #ffffff + filo  (dice dove si scrive)

   Il filo resta **solo** sui campi, quindi «dove si scrive» torna a essere un
   segnale univoco, e le card ne guadagnano: meno linee a schermo, non di piu'.

   Vale solo da 992px in su. Sotto, la pagina e' piatta a tutta larghezza: non
   ci sono card da separare e il fondo resta bianco — i due modi restano due.
   ========================================================================= */
@media (min-width: 960px) {
  html:not(#_):not(#__):not(#___):not(#____):not([data-theme="dark"]):not([data-bs-theme="dark"]) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:not(.dark-mode):not(.dark):not(.theme-dark):has(.shipping-page-wrapper) :is(#scene, #app3d, main, .content-with-navbar, .shipping-page-wrapper) {
    background-color: var(--sw-surface-2) !important;
  }

  html:not(#_):not(#__):not(#___):not(#____):not([data-theme="dark"]):not([data-bs-theme="dark"]) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:not(.dark-mode):not(.dark):not(.theme-dark) .shipping-page-wrapper[class][class] :is(#shippingForm > .card, .shipping-details-card, #accessoriesCard, .card.sender-box, .card.receiver-box, .pickup-box-full > .card, .sticky-summary, .shipping-help-card, .shipping-secure-card, .nedate-section-card):not(.shipping-card) {
    border-color: transparent !important;
    background: var(--sw-surface) !important;
    /* Non e' quota: e' il bordo morbido che il salto di colore da solo non da'
       su uno schermo luminoso. La sfocatura resta a 2px contro i 14px di varco
       fra una card e l'altra: le ombre di due card vicine non si incontrano,
       che e' esattamente quello che aveva creato la fascia grigia (§60). */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03) !important;
  }

  /* Il contenitore che avvolge tutto il modulo era anche lui bianco: con le
     card senza filo la colonna diventava un unico blocco continuo e il fondo
     non si vedeva piu' fra un passaggio e l'altro. */
  html:not(#_):not(#__):not(#___):not(#____):not([data-theme="dark"]):not([data-bs-theme="dark"]) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:not(.dark-mode):not(.dark):not(.theme-dark) .shipping-page-wrapper[class][class] :is(.shipping-card, .shipping-card > .container, #shippingForm) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* La casella di spunta del consenso stava 4,6px piu' in alto del centro
   ottico della frase: la riga era allineata in cima (`flex-start`) e la
   casella partiva dal bordo alto della prima riga di testo, non dal suo
   centro. Qui la frase e' una sola e corta: la riga si centra, e la casella
   cade in mezzo al testo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .terms-accept-option {
  align-items: center !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], #mobileSummarySheet) .terms-accept-option .form-check-input {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================================
   72. /SPEDIZIONI — GLI ASTERISCHI TORNANO ROSSI
   -------------------------------------------------------------------------
   Nel markup erano gia' tutti a posto: 65 asterischi, tutti dentro
   `<span class="text-danger">`. A schermo ne uscivano rossi **3**; gli altri
   62 erano grigi come l'etichetta che li conteneva.

   La colpa e' delle regole che danno il colore alle etichette: scrivono
   `color` **e** `-webkit-text-fill-color` sull'elemento, e il riempimento
   scende sui figli senza che la classe del figlio possa dire la sua —
   `-webkit-text-fill-color` vince sempre su `color`. La classe c'era, ma
   veniva ridipinta sopra.

   Qui il segno di «campo obbligatorio» si riprende il suo colore, dentro le
   etichette, nelle scelte e ovunque altro sulla pagina.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(:is(.shipping-page-wrapper[class][class], .sw-forms[class][class]), .ship-sheet, .ship-fields[class][class], .sw-forms[class][class], #mobileSummarySheet) .text-danger,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(:is(.shipping-page-wrapper[class][class], .sw-forms[class][class]), .ship-sheet, .ship-fields[class][class], .sw-forms[class][class], #mobileSummarySheet) :is(label, .form-label, .form-check-label, .card-sub, legend, dt) .text-danger {
  color: var(--sw-danger) !important;
  -webkit-text-fill-color: var(--sw-danger) !important;
}

/* =========================================================================
   73. /SPEDIZIONI — IL CAMPO: FILO PIU' QUIETO, GERARCHIA NEL VUOTO
   -------------------------------------------------------------------------
   Misurando un campo a riposo, due numeri non tornavano.

   **Il filo era a 3,28:1 su bianco** — un contrasto da *testo*, non da bordo a
   riposo, dove la convenzione sta fra 1,5 e 2,2. Su un campo isolato non si
   nota; questa pagina ne ha 34 e diventava una griglia di gabbie, con il
   bordo che compete con quello che c'e' scritto dentro. E adesso al filo si
   chiede anche meno: il fondo grigio con le card bianche fa gia' la
   separazione. Sceso a #adbaca, 1,97:1. Il colore forte resta dov'e' utile —
   fuoco ed errore.

   **Etichetta e testo guida avevano lo stesso identico grigio** (5,03:1 tutti
   e due): a campo vuoto si leggeva «COGNOME *» e «Cognome» nello stesso tono,
   due grigi uguali che dicono la stessa parola. Il suggerimento e' un'eco
   dell'etichetta, non un'informazione: sceso a #7e8da3 (3,37:1). In tema
   scuro questa gerarchia c'era gia' — etichetta #aebdd0, guida #8fa1b8 — ed
   era il chiaro a essere piatto.

   **Il testo saltava di un pixel quando si scriveva**: guida a 14px, valore a
   15px. Adesso stessa misura, cambia solo il colore.

   Non ho toccato l'altezza: i 58px sono il token condiviso con /accedi e
   /tracking, e valgono piu' loro dei 2px di respiro che avrei guadagnato.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____):not([data-theme="dark"]):not([data-bs-theme="dark"]) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:not(.dark-mode):not(.dark):not(.theme-dark) :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) {
  --sw-field-border: #adbaca;
  --nd-form-standard-border: #adbaca;
  --sw-placeholder-ink: #7e8da3;
}

/* Il gruppo con l'unita' (kg, cm) porta la cornice al posto del campo: in
   chiaro legge lo stesso token dei campi ed e' a posto, in scuro restava sul
   vecchio #496996 mentre i campi sono a #334155 — stessa catena del widget
   del paese, stessa correzione. */
html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) .nd-input-addon-group,
html[data-bs-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) .nd-input-addon-group,
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) .nd-input-addon-group {
  border-color: var(--spedire-border, #334155) !important;
}

/* =========================================================================
   74. /SPEDIZIONI — SPIGOLI VIVI SU CARD E CAMPI
   -------------------------------------------------------------------------
   Via il raggio da tutte le superfici e da tutti i controlli di scrittura:
   card, campi di testo, tendine, aree di testo, gruppi con l'unita' e il
   pannello del widget del paese. Restano com'erano i pulsanti, i bollini dei
   passaggi, le caselle di spunta e i pallini: non sono superfici di
   contenuto, e squadrarli era un'altra decisione.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .ship-sheet, .ship-fields[class][class], #mobileSummarySheet) :is(.card, .nedate-section-card, .sticky-summary, .shipping-help-card, .shipping-secure-card, .shipping-details-card, .shipping-card, .shipping-hero-panel, .sender-box, .receiver-box) {
  border-radius: 0 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(:is(.shipping-page-wrapper[class][class], .sw-forms[class][class]), .ship-sheet, .ship-fields[class][class], .sw-forms[class][class], #mobileSummarySheet) :is(.form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input[type="password"], .select2-selection, .select2-selection--single, .select2-selection__rendered, .nd-input-addon-group, .ship-dim-input-group, .input-group, .input-group-text, .nd-input-addon-control) {
  border-radius: var(--sw-field-radius, 5px) !important;
}

/* La tendina del paese non e' piu' qui. Il pannello, il campo di ricerca e le
   righe di Select2 li veste `public/css/sw-place-field.css`, che fa lo stesso
   lavoro anche per le tendine fatte a mano di /welcome: un componente, una
   sorgente. Squadrarle qui voleva dire tenere due opinioni sullo stesso
   oggetto — e per giunta discordi con i campi di questa stessa pagina, che
   il raggio di 5px ce l'hanno (misurato). */

/* La sfumatura in fondo al riquadro dei termini seguiva il raggio del campo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .ship-sheet, .ship-fields[class][class]) .terms-text-box::after {
  border-radius: 0 !important;
}

/* =========================================================================
   75. /SPEDIZIONI — L'ETICHETTA FA DA GUIDA E POI SALE
   -------------------------------------------------------------------------
   Dove il campo non ha un testo guida suo (`placeholder=" "`, 55 campi su
   62), a riposo l'etichetta sta **in mezzo alla casella, alla misura del
   valore**, e fa da guida; al fuoco — o appena c'e' qualcosa scritto — si
   rimpicciolisce e sale al suo posto in alto. E' il motivo «etichetta
   flottante», ma acceso **solo** dove serve.

   I sette campi che una guida ce l'hanno davvero («name@example.com»,
   «0.00», «Cerca nome o azienda…») restano come sono: li' l'etichetta deve
   stare in alto da subito, altrimenti coprirebbe la guida.

   Il selettore `[placeholder=" "]` e' quello che distingue i due casi, ed e'
   anche il motivo per cui lo script non copia piu' l'etichetta dentro il
   `placeholder`: Bootstrap decide dallo stato `:placeholder-shown`, e
   riempirlo avrebbe spento il meccanismo.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .ship-sheet, .ship-fields[class][class], .sw-forms[class][class]) .form-floating > input.form-control[placeholder=" "]:placeholder-shown:not(:focus) ~ label,
/* Il preventivo in home ha la stessa idea con un'altra forma: li'
   l'etichetta viene **prima** del campo e la scatola e' il gruppo, non il
   `.form-floating`. Stesse dichiarazioni, un selettore in piu'. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .ship-sheet, .ship-fields[class][class], .sw-forms[class][class]) :is(.log-input-inner-label, .log-label):has(~ .log-input[placeholder=" "]:placeholder-shown:not(:focus)) {
  /* Il centro e' quello del **campo**, non del contenitore.
     `top: 50%` sembrava la stessa cosa finche' nel `.form-floating` c'era solo
     il campo: quando la validazione ci appende dentro anche il messaggio, il
     contenitore passa da 58px a 81,8 e meta' di 81,8 sono 41 — l'etichetta
     scivolava nella parte bassa della casella proprio nel momento in cui uno
     la guarda. Ancorata al token dell'altezza del campo, non si muove. */
  top: calc(var(--ship-field-h, 58px) / 2) !important;
  bottom: auto !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: translateY(-50%) !important;
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-light, 300) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.25 !important;
  color: var(--sw-placeholder-ink, var(--sw-muted)) !important;
  -webkit-text-fill-color: var(--sw-placeholder-ink, var(--sw-muted)) !important;
  opacity: 1 !important;
  /* `top` in lista, se no il movimento non c'e': fra i due stati l'etichetta
     cambia `top` (dal centro del campo a 0) e quella parte saltava di colpo
     mentre il resto scorreva. Con la curva morbida la salita si vede. */
  transition: top .2s cubic-bezier(.2, .7, .3, 1),
              transform .2s cubic-bezier(.2, .7, .3, 1),
              font-size .2s cubic-bezier(.2, .7, .3, 1),
              letter-spacing .2s ease,
              color .16s ease !important;
}

/* Lo stato «salita»: la stessa transizione, cosi' il movimento si vede in
   tutte e due le direzioni invece di scattare solo in una. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .ship-sheet, .ship-fields[class][class], .sw-forms[class][class]) .form-floating > :is(input, textarea).form-control[placeholder=" "] ~ label,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .ship-sheet, .ship-fields[class][class], .sw-forms[class][class]) :is(.log-input-inner-label, .log-label):has(~ .log-input[placeholder=" "]) {
  /* `top` in lista, se no il movimento non c'e': fra i due stati l'etichetta
     cambia `top` (dal centro del campo a 0) e quella parte saltava di colpo
     mentre il resto scorreva. Con la curva morbida la salita si vede. */
  transition: top .2s cubic-bezier(.2, .7, .3, 1),
              transform .2s cubic-bezier(.2, .7, .3, 1),
              font-size .2s cubic-bezier(.2, .7, .3, 1),
              letter-spacing .2s ease,
              color .16s ease !important;
  transform-origin: left center !important;
}

/* =========================================================================
   76. /SPEDIZIONI — SPIGOLI VIVI ANCHE SUI PULSANTI
   -------------------------------------------------------------------------
   Completa la sezione 74: dopo card e campi, il raggio sparisce anche dai
   pulsanti — quelli di testo, quelli quadrati con la sola icona, i gruppi e
   la barra del riepilogo sul telefono. Restano tondi solo le caselle di
   spunta, i pallini e i bollini dei numeri, che tondi devono essere.
   ========================================================================= */
/* `.log-select-btn` esce dalla regola dei pulsanti squadrati: e' un campo
   vestito da `<button>`, e deve tenere il raggio degli altri campi. */
/* `:not(.sw-cta)`: questa regola spiana gli angoli di ogni `button` dentro
   `.sw-forms` — e' la geometria a spigolo dei moduli. Ma la carta rossa
   dell'azione principale ha il suo raggio di 14px, e quando e' un `<button>`
   (perche' apre una finestra invece di portare altrove) qui dentro lo
   perdeva: sul portafoglio e' un `<a>` e aveva gli angoli tondi, su
   /admin/couriers era un `<button>` e li perdeva. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(:is(.shipping-page-wrapper[class][class], .sw-forms[class][class]), .ship-sheet, .ship-fields[class][class], .sw-forms[class][class], #mobileSummaryBar, #mobileSummarySheet) :is(.btn, .btn-group, .btn-group > .btn, .btn-rounded, .mobile-summary-trigger, .shipping-compare-couriers, .qq-dd-close, button:not(.select2-selection):not(.form-check-input):not(.log-select-btn):not(.sw-cta)):not(.sw-page-action) {
  border-radius: 0 !important;
}

/* =========================================================================
   77. /SPEDIZIONI — LA SCELTA DEL CORRIERE
   -------------------------------------------------------------------------
   La riga del corriere aveva la gerarchia rovesciata: la frase di servizio
   («Il corriere ritira presso il mittente…») era il testo **piu' grande**
   della riga, piu' del nome del corriere, ed era per giunta in rosso — un
   colore che sulla pagina significa «azione» o «obbligatorio», non
   «descrizione». Il prezzo, che e' il motivo per cui si guarda la riga,
   stava in piccolo in un angolo.

   La riga scelta si tingeva di rosa con la cornice rossa: molto rumore per
   dire una cosa che il pallino gia' dice. Qui il segno e' una barra sul lato
   e un fondo appena accennato.

   Ordine di lettura: **corriere → servizio → prezzo**, con i dettagli
   (giorni, tracciamento, peso massimo) come riga di appoggio.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(.carrier-card, .carrier-sort-tab, .carrier-compare-all, .carrier-pill, .carrier-logo-box, .carrier-details-toggle, .carrier-details-panel, .carrier-sort-tabs) {
  border-radius: 0 !important;
}

/* --- la riga --- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-card {
  padding: 1rem 1.15rem !important;
  border: 1px solid var(--sw-field-border) !important;
  background: var(--sw-surface) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-card + .carrier-card {
  margin-top: .6rem !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-card:hover {
  border-color: var(--sw-muted) !important;
}

/* La scelta: una barra sul lato, non un lavaggio rosa. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-card.is-selected {
  border-color: var(--sw-brand-600) !important;
  background: var(--sw-surface) !important;
  box-shadow: inset 3px 0 0 0 var(--sw-brand-600) !important;
}

/* --- il nome comanda --- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-name {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: 1.05rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: -.01em !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-service {
  margin-top: .12rem !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs, 12.5px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  letter-spacing: normal !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-desc {
  margin-top: .3rem !important;
  color: var(--sw-ink-soft, var(--sw-muted)) !important;
  -webkit-text-fill-color: var(--sw-ink-soft, var(--sw-muted)) !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-regular, 400) !important;
  line-height: 1.45 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-meta {
  margin-top: .55rem !important;
  gap: .95rem !important;
  color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs, 12.5px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
}

/* --- le pillole --- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-pill {
  padding: .15rem .45rem !important;
  border: 0 !important;
  font-size: .66rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-pill--recommended {
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
}

/* Il nome del corriere ripetuto in pillola non aggiunge niente accanto al
   nome scritto due centimetri prima: resta, ma non si fa notare. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-badges .carrier-pill {
  background: transparent !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
}

/* --- il prezzo ancora la riga a destra --- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-price {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: 1.3rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-days {
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs, 12.5px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-card.is-selected .carrier-price {
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
}

/* --- «vedi dettagli»: un comando di testo, non una fascia piena --- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-details-toggle {
  margin-top: .9rem !important;
  padding: .55rem 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--sw-line) !important;
  background: transparent !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs, 12.5px) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  justify-content: flex-start !important;
  gap: .35rem !important;
}

/* Rifiniture della riga corriere: la riga di appoggio non deve pesare come il
   nome, «Vedi dettagli» e' un comando di testo allineato a sinistra, e lo
   stato della scelta ha bisogno di respiro accanto al prezzo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-meta > span {
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs, 12.5px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  gap: .3rem !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-details-toggle {
  width: 100% !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-details-toggle > span {
  margin-right: auto !important;
  text-align: left !important;
  flex: 0 0 auto !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-select-state {
  margin-left: .55rem !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: var(--sw-text-xs, 12.5px) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-card.is-selected .carrier-select-state {
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .carrier-price-box {
  gap: .65rem !important;
}

/* Il pallino della scelta e' un elemento flex accanto al testo: senza una
   base fissa il testo se lo mangiava e restava una scheggia di 2px al posto
   del cerchio da 14. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-select-state::before {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
}

/* In tema scuro le linguette dell'ordinamento, il pulsante «Confronta tutti»
   e il pallino non scelto erano rimasti bianchi: fondo chiaro con sopra testo
   chiaro, cioe' illeggibili. Seguono i token del tema come tutto il resto. */
html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results :is(.carrier-sort-tab, .carrier-compare-all),
html[data-bs-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results :is(.carrier-sort-tab, .carrier-compare-all),
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results :is(.carrier-sort-tab, .carrier-compare-all) {
  border: 1px solid var(--spedire-border, #334155) !important;
  background: var(--sw-surface) !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}

html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-select-state::before,
html[data-bs-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-select-state::before,
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-select-state::before {
  border-color: var(--spedire-border, #334155) !important;
  background: var(--sw-surface) !important;
  box-shadow: inset 0 0 0 3px var(--sw-surface) !important;
}

html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-card.is-selected .carrier-select-state::before,
html[data-bs-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-card.is-selected .carrier-select-state::before,
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-card.is-selected .carrier-select-state::before {
  border-color: var(--sw-brand-600) !important;
  background: var(--sw-brand-600) !important;
  box-shadow: inset 0 0 0 3px var(--sw-surface) !important;
}

/* La linguetta attiva deve restare riconoscibile anche in scuro. */
html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-sort-tab.is-active,
html[data-bs-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-sort-tab.is-active,
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-sort-tab.is-active {
  border-color: var(--sw-brand-600) !important;
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
}

/* =========================================================================
   78. /SPEDIZIONI — GLI ACCESSORI
   -------------------------------------------------------------------------
   Erano cinque schede incorniciate dentro la scheda del passaggio: scatole
   dentro una scatola, la cosa che abbiamo tolto da tutto il resto della
   pagina. E la riga aperta si tingeva di rosa con il titolo in rosso — sulla
   pagina il rosso e' azione o obbligo, non «questa riga e' aperta».

   Diventano una lista sola: righe separate da un filo, titolo in inchiostro,
   e il segno di «aperto» lo da' la freccia, che e' il suo mestiere. Dentro,
   la descrizione e' testo attenuato e l'interruttore sta accanto a lei.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accordion-item {
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accordion-item:first-of-type,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accordion-item:not(.d-none):first-of-type {
  border-top: 0 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accordion-button {
  padding: .95rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: normal !important;
}

/* Aperta: cambia la freccia, non il colore del titolo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accordion-button:not(.collapsed) {
  background: transparent !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  box-shadow: none !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accordion-collapse {
  border: 0 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accordion-body {
  padding: 0 0 1.15rem !important;
  border: 0 !important;
  background: transparent !important;
}

/* Il pallino dice se l'accessorio e' attivo: che si veda. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accessory-dot {
  width: 9px !important;
  height: 9px !important;
  margin-left: auto !important;
  margin-right: .85rem !important;
  border-radius: 999px !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accessory-dot.off {
  background: var(--sw-line) !important;
  box-shadow: none !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accessory-dot.on {
  background: var(--sw-success, #16a34a) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-success, #16a34a) 22%, transparent) !important;
}

/* La descrizione e' testo da leggere, non un titolo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accordion-body .card-sub {
  margin: 0 !important;
  max-width: 62ch !important;
  color: var(--sw-ink-soft, var(--sw-muted)) !important;
  -webkit-text-fill-color: var(--sw-ink-soft, var(--sw-muted)) !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-regular, 400) !important;
  line-height: 1.5 !important;
}

/* Un campo per un importo non ha bisogno di mille pixel. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #accessoriesCard .accordion-body :is(.form-floating, .nd-input-addon-group, .input-group) {
  max-width: 18rem !important;
}

/* L'interruttore «Abilita» era dichiarato `form-switch` nel markup ma usciva
   come una casella quadrata: la levetta e' il segno che quella cosa si accende
   e si spegne, una casella dice un'altra cosa. Ricostruita con i token. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) .form-check.form-switch[class] input.form-check-input[type="checkbox"] {
  width: 2.4rem !important;
  height: 1.35rem !important;
  margin-top: .1rem !important;
  border: 1px solid var(--sw-field-border) !important;
  border-radius: 999px !important;
  /* La casella era disegnata dal browser: senza `appearance: none` il widget
     nativo ignora fondo, immagine e raggio — ecco perche' la mia regola
     risultava vincente nella cascata e a schermo restava un quadretto da
     20px dentro una scatola da 34x19. */
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--sw-surface) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adbaca'/%3e%3c/svg%3e") !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transition: background-position .15s ease-in-out, background-color .15s ease, border-color .15s ease !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) .form-check.form-switch[class] input.form-check-input[type="checkbox"]:checked {
  border-color: var(--sw-brand-600) !important;
  background-color: var(--sw-brand-600) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
  background-position: right center !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) .form-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: .6rem !important;
  padding-left: 0 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .sw-forms[class][class]) .form-switch .form-check-label {
  margin: 0 !important;
}

/* Lo stato della scelta stava in fila dopo il prezzo e non ci stava: usciva
   dal bordo destro della card e «Selezionato» veniva tagliato a meta'. Va
   dove c'e' spazio vuoto — in alto a destra — e smette di contendere la riga
   al prezzo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-card {
  position: relative !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-select-state {
  position: absolute !important;
  top: .95rem !important;
  right: 1.15rem !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* Senza lo stato in fila, il prezzo si prende il fondo della riga a destra e
   lascia respirare l'angolo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-price-box {
  margin-left: auto !important;
  padding-right: 0 !important;
}

/* Il titolo lascia il posto al distintivo nell'angolo — ma solo dove il
   distintivo porta anche la parola: sul telefono resta il solo pallino e
   otto rem di rientro tagliavano il nome del corriere a «Poste…». */
@media (min-width: 960px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-title-row {
    padding-right: 8rem !important;
  }
}

@media (max-width: 959.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-title-row {
    padding-right: 2rem !important;
  }
}

/* Nella scheda dei dettagli il markup distingue gia' voce (`span`) da valore
   (`strong`), ma il CSS li portava tutti e due in grassetto: dodici righe
   tutte dello stesso peso, in cui nessuna gerarchia si legge piu'. La voce
   torna a essere una voce — attenuata e di peso normale — e il grassetto
   resta al valore, che e' l'informazione. I due titoli di colonna restano
   titoli. */
/* La voce porta il grassetto, il valore no: e' la lettura che mi e' stata
   chiesta — «Tracciamento» in evidenza e «Incluso» in tono normale. I due
   restano dello stesso inchiostro, a distinguerli e' solo il peso. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-row > span {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: normal !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-check > span {
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-regular, 400) !important;
  letter-spacing: normal !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-row > strong {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: var(--sw-placeholder-fs, 14px) !important;
  font-weight: var(--sw-weight-regular, 400) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-title {
  margin-bottom: .45rem !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: var(--sw-control-fs, 15px) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-row {
  padding: .2rem 0 !important;
}

/* La riga «Servizio» porta un valore lungo e veniva tagliata su tutte e due
   le colonne («Serv…» / «Ritiro a domicilio → Consegna…»): un dettaglio che
   si apre apposta per essere letto non puo' nascondere proprio quello. La
   riga va a capo invece di troncare. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-row {
  flex-wrap: wrap !important;
  gap: .15rem .75rem !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-row > :is(span, strong) {
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-row > strong {
  margin-left: auto !important;
  text-align: right !important;
}

/* In tema scuro la scheda dei dettagli era rimasta con il fondo chiaro: testo
   chiaro su fondo chiaro, illeggibile. Prende la superficie secondaria del
   tema, che in scuro e' un gradino piu' chiara della card. */
html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-details-panel,
html[data-bs-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-details-panel,
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-details-panel {
  border-color: var(--spedire-border, #334155) !important;
  background: var(--sw-surface-2) !important;
}

html[data-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-group,
html[data-bs-theme="dark"]:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-group,
html:not(#_):not(#__):not(#___):not(#____) body.dark-mode.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_results .carrier-detail-group {
  border-color: var(--spedire-border, #334155) !important;
  background: transparent !important;
}

/* =========================================================================
   79. /SPEDIZIONI — SPAZIO REALE FRA LE CARD SUL TELEFONO
   -------------------------------------------------------------------------
   Le sezioni non sono divise da una linea: sono blocchi distinti separati da
   un gap del canvas. Nel varco si vede quindi lo sfondo grigio della pagina,
   mentre ogni card resta bianca.
   ========================================================================= */
@media (max-width: 959.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#shippingForm > .card, .card.sender-box, .card.receiver-box) {
    margin-top: 12px !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    /* con i margini negativi la larghezza deve poter crescere di 2rem: se
       resta bloccata a 100% il filo finisce a meta' strada */
    width: auto !important;
    max-width: none !important;
  }

  /* Il modulo ritagliava quello che usciva dal suo riquadro, e il filo a
     tutta larghezza esce per definizione. Il taglio resta comunque sul
     contenitore di pagina, che e' largo quanto lo schermo. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #shippingForm {
    overflow: visible !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #shippingForm > .card:first-child {
    margin-top: 0 !important;
  }
}

/* =========================================================================
   80. /SPEDIZIONI — I COMANDI DEL PASSAGGIO 1 IN ALTO A DESTRA (TELEFONO)
   -------------------------------------------------------------------------
   Sul telefono i tre pulsanti (indirizzo predefinito, rubrica mittenti,
   rubrica destinatari) scendevano su una riga tutta loro e si prendevano una
   fascia di spazio prima ancora del primo campo. Il motivo: il blocco del
   titolo chiede 16rem di base e con i pulsanti accanto non ci sta in 362px,
   quindi la riga andava a capo.

   Adesso il titolo puo' stringersi — e troncarsi, se serve — il sottotitolo
   va a capo, e i pulsanti restano dove devono stare: in alto a destra.
   ========================================================================= */
@media (max-width: 959.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .card-body > .d-flex:has(.shipping-step-actions) {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: .75rem !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .card-body > .d-flex:has(.shipping-step-actions) > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .card-body > .d-flex:has(.shipping-step-actions) > div:first-child .display-6 {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .card-body > .d-flex:has(.shipping-step-actions) > div:first-child .card-sub {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .shipping-step-actions {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
  }
}

/* Sotto i 360px il titolo non ci sta in nessun caso accanto a tre pulsanti:
   li' e' meglio mandarlo a capo che tagliarlo a meta' parola — il taglio
   senza puntini (il titolo e' un flex, i puntini non ci arrivano) sembra un
   difetto, l'andata a capo no. */
@media (max-width: 359.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] .card-body > .d-flex:has(.shipping-step-actions) > div:first-child .display-6 {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* =========================================================================
   81. /SPEDIZIONI — LO STACCO DALLA BARRA, COME SU /TARIFFE
   -------------------------------------------------------------------------
   Misurato a 390px: su /tariffe fra il bordo basso della barra e il riquadro
   dell'occhiello ci sono **16,5px**; su /spedizioni erano **0** — l'occhiello
   cominciava esattamente dove finiva la barra, incollato.
   Il rientro superiore della pagina vale 56px, cioe' solo l'altezza della
   barra fissa: non lasciava nessuno stacco. Portato a 72,5px, che e' la
   stessa quota a cui si trova l'occhiello di /tariffe.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .docs-api-page)[class][class] {
    /* 56 di barra piu' lo stacco: lo stesso conto per tutte e due le pagine,
       scritto una volta. Il portale degli sviluppatori prendeva la regola
       generale dell'area riservata (barra piu' 1rem = 70px) e restava 2,5px
       piu' in alto di /spedizioni. */
    padding-top: calc(var(--sw-nav-height, 56px) + var(--sw-bar-gap-mobile, 16.5px)) !important;
  }
}

/* Fra 768 e 992 la barra cresce (62px, poi 72) e /tariffe tiene un rientro
   fisso di 105px: stesso numero, cosi' le due pagine restano appaiate anche
   in quella fascia. */
@media (min-width: 768px) and (max-width: 959.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] {
    padding-top: 105px !important;
  }
}

/* =========================================================================
   83. /SPEDIZIONI — LE CARD DELLA COLONNA RIEPILOGO SUL TELEFONO
   -------------------------------------------------------------------------
   Sul telefono la pagina e' piatta perche' i passaggi sono una sequenza: li'
   la cornice non serve. Le tre card della colonna di destra pero' non sono
   passaggi — sono schede a se, che arrivano dopo il modulo — e senza cornice
   si confondevano col fondo. Riprendono filo e fondo bianco, e il corpo
   riprende il rientro che gli serve per non toccare il filo.
   ========================================================================= */
@media (max-width: 959.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#shippingSummaryCard.card, .sticky-summary, .shipping-help-card, .shipping-secure-card) {
    border: 1px solid var(--sw-line) !important;
    background: var(--sw-surface) !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#shippingSummaryCard.card, .sticky-summary, .shipping-help-card, .shipping-secure-card) :is(.card-body, .card-header) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* =========================================================================
   84. /SPEDIZIONI — LA BARRA DELLA VISTA A TUTTO SCHERMO, DA BORDO A BORDO
   -------------------------------------------------------------------------
   Su uno schermo da 390px la barra si mangiava 56px di bordi: 16 di rientro
   ereditati dal guscio di pagina piu' 12 suoi, da tutte e due le parti. Il
   campo partiva a 28px dal bordo e la X si fermava a 28px dall'altro.

       prima                       ora
    |  28px |  campo | X |  28px |  →  | 3px | campo | X |
    campo 282px                        campo 321px
    X 44x44 (numero suo)               X quadrata sull'altezza del campo

   La X non ha piu' una misura sua: legge lo stesso token del campo, cosi'
   se un giorno l'altezza dei campi cambia la barra resta allineata. E la
   tendina dei risultati non parte piu' da un 72px scritto a mano — che con
   la barra da 79,8px la faceva salire sotto al campo — ma dall'altezza vera
   della barra, calcolata dallo stesso token.
   ========================================================================= */
@media (max-width: 959.98px) {

  /* La grondaia del guscio di pagina arriva fin qui perche' `.ship-sheet` sta
     nella stessa `:is()` di `.shipping-page-wrapper` — e' li' per ereditarne
     campi e tipografia, non i rientri. Stesso peso di quella regola, ma piu'
     in basso nel foglio: vince questa. */
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .ship-sheet {
    /* l'altezza della barra: campo + respiro sopra e sotto + il filo */
    --ship-sheet-bar-h: calc(var(--ship-field-h, 58px) + 1.3rem + 1px);
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.nedate-ui-standard[class][class][class][class] .ship-sheet__bar {
    /* Tre pixel da tutte e due le parti: il campo parte a 3 da sinistra, la X
       si ferma a 3 da destra. Prima era appoggiata al bordo e la riga sembrava
       storta di quei tre pixel. */
    padding: .65rem 3px !important;
    gap: 8px !important;
  }

  /* La X, quadrata sull'altezza del campo e appoggiata al bordo destro.
     Vale per tutte e due le viste: quella della citta' legge il token dei
     campi, quella del paese l'altezza della sua ricerca. */
  html body.nedate-ui-standard[class][class][class][class] .ship-sheet__bar .ship-sheet__close {
    flex: 0 0 var(--ship-field-h, 58px) !important;
    width: var(--ship-field-h, 58px) !important;
    height: var(--ship-field-h, 58px) !important;
    margin: 0 !important;
  }

  html body.nedate-ui-standard[class][class][class][class] .ship-sheet .city-dd {
    top: var(--ship-sheet-bar-h) !important;
  }

  /* --- la stessa riga per la scelta del paese ------------------------- */
  html.ship-country-sheet body.nedate-ui-standard[class][class][class][class] .select2-container--open .select2-search--dropdown {
    padding: .65rem 0 .65rem 3px !important;
    gap: 8px !important;
  }

  html.ship-country-sheet body.nedate-ui-standard[class][class][class][class] .select2-search--dropdown .ship-sheet__close {
    flex: 0 0 var(--sw-control-h-lg, 56px) !important;
    width: var(--sw-control-h-lg, 56px) !important;
    height: var(--sw-control-h-lg, 56px) !important;
    margin: 0 !important;
  }
}

/* =========================================================================
   85. /SPEDIZIONI — LE ETICHETTE PARLANO CON UNA VOCE LORO
   -------------------------------------------------------------------------
   Fin qui tutta la pagina era IBM Plex Sans: campo, etichetta e valore con
   la stessa faccia, distinti solo da misura e peso. Le etichette prendono
   Poppins — geometrica, maiuscole larghe e tonde, che alle misure piccole
   tengono meglio del Plex — e diventano riconoscibili come categoria: nome
   del campo, non testo scritto dentro il campo.

   Vale per le etichette dei campi: quelle mobili (`.form-floating`, select2
   compreso) e le poche fisse `.form-label`. Le etichette di spunta restano
   nel carattere del testo: «Ho letto e accetto...» e' una frase, non il nome
   di un campo, e in Poppins sembrerebbe un titolo.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(.form-floating > label, .form-label, .select2-floating > label, .log-input-inner-label, .log-label) {
  font-family: var(--sw-font-label) !important;
}

/* Il nome del campo compare anche dentro il riquadro delle misure (kg, cm) e
   sopra le righe della dogana: stessa natura, stessa voce. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(.nd-input-addon-group label, .taric-row label) {
  font-family: var(--sw-font-label) !important;
}

/* =========================================================================
   86. /SPEDIZIONI — IL CAMPO PARLA TUTTO CON LA STESSA VOCE
   -------------------------------------------------------------------------
   Nella 85 avevano preso Poppins solo le etichette: nome del campo in una
   voce, valore e segnaposto in un'altra. Dentro lo stesso rettangolo si
   leggevano due caratteri diversi, e la differenza si vedeva nel momento in
   cui l'etichetta sale e lascia il posto a quello che scrivi.

   Adesso il campo e' tutto Poppins e tutto di un peso solo, il 500: etichetta,
   valore, segnaposto, il testo che si scrive per cercare e le voci che
   l'elenco propone. Anche le etichette salite, che stavano a 600.

   Restano in IBM Plex le unita' di misura (kg, cm): non sono ne' un nome ne'
   un valore, sono la coda della misura, e hanno un loro token apposta.
   ========================================================================= */

/* --- valore, testo scritto, opzioni ---------------------------------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(.form-control, .form-select, textarea.form-control, select, .select2-selection__rendered, .select2-search__field, .log-input, .log-select-btn .country-name):not(#tos_text):not(.sw-code-area):not(.sw-codefield) {
  font-family: var(--sw-font-label) !important;
  font-weight: var(--sw-weight-light, 300) !important;
}

/* Le escluse dal carattere geometrico sono due, e per lo stesso motivo:
   hanno la forma di un campo ma dentro non c'e' un valore.

   La prima e' la textarea dei Termini: c'e' un testo da leggere. La 67 le
   aveva gia' tolto il peso del campo (resta regolare, 400); qui le lascia
   anche il carattere del testo, che su venti righe di legalese si legge
   meglio di una geometrica.

   La seconda e' `sw-code-area` (vedi la 198): dentro c'e' codice, e in una
   geometrica i tag non si leggono. L'esclusione va messa qui e non basta
   scrivere una regola in fondo al foglio: misurato con l'ispettore, in
   questo punto arrivano otto `[class]` e quattro `:not(#_)`, e nessuna
   regola scritta dopo ci arriva vicino. Il colore e la geometria del campo
   restano quelli di tutti gli altri: cambia solo la voce. */

/* --- il segnaposto -------------------------------------------------- */
/* Il segnaposto e' un esempio, non un valore: stesso carattere e stessa
   misura di quello che si scrivera' li' dentro, ma **piu' leggero** — 300
   invece di 500 — cosi' si distingue da cio' che e' stato digitato senza
   cambiare riga ne' posizione. E' l'unico posto della pagina che usa il
   Poppins 300, che era dichiarato e non lo scaricava nessuno. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(.form-control, .form-select, textarea, select, .log-input)::placeholder {
  font-family: var(--sw-font-label) !important;
  font-weight: var(--sw-weight-light, 300) !important;
  /* La misura sta qui e non nella regola della geometria, che passa solo per
     i `.form-floating`: il testo guida del preventivo in home restava a 14px
     contro i 15 di tutti gli altri, e accanto a /spedizioni si vedeva. */
  font-size: var(--sw-control-fs, 15px) !important;
}

/* Le opzioni di un select nativo le disegna il sistema operativo, non la
   pagina: la regola vale dove il browser la ascolta e non fa danno dove non
   la ascolta. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] select option {
  /* Nel menu aperto il testo torna normale: quell'elenco lo disegna il sistema
     operativo, e a quelle misure il 500 di Poppins gli arriva come un
     grassetto — due voci in nero pieno per scegliere fra «Partita IVA» e
     «Codice fiscale». Nel campo chiuso il valore resta com'e'. */
  font-family: var(--sw-font-label) !important;
  font-weight: var(--sw-weight-normal, 400) !important;
}

/* --- l'etichetta, anche quando e' salita ----------------------------- */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(.form-floating > label, .form-label, .select2-floating > label, .nd-input-addon-group label, .taric-row label, .log-input-inner-label, .log-label, .sw-picker__label) {
  font-weight: var(--sw-weight-semi, 600) !important;
  /* L'interlinea sta qui e non nella regola di posizione perche' l'etichetta
     del preventivo in home non e' dentro un `.form-floating`: la sua scatola
     e' il gruppo. Senza questa riga restava a 1,2 e sedeva un pixel piu' in
     basso di tutte le altre. */
  line-height: 1 !important;
}

/* --- l'elenco delle nazioni ------------------------------------------
   select2 appende il suo pannello al <body>, fuori dal guscio della pagina:
   non lo prende nessuna delle regole qui sopra. Lo si riconosce dalla classe
   che gli mette il nostro codice (`dropdownCssClass: 'nedate-country-dropdown'`),
   cosi' la regola resta su questo controllo e non su tutti i select2 del
   sito. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] :is(.nedate-country-dropdown, .nedate-country-dropdown .select2-results__option, .nedate-country-dropdown .select2-search__field) {
  font-family: var(--sw-font-label) !important;
  /* Stesso ragionamento del menu nativo: un elenco da scorrere si legge
     meglio in tondo. Il peso lo tiene la riga evidenziata, non il carattere. */
  font-weight: var(--sw-weight-normal, 400) !important;
}

/* --- l'elenco delle citta' ------------------------------------------- */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] :is(.city-dd, .city-dd .item, .city-dd .empty) {
  font-family: var(--sw-font-label) !important;
  font-weight: var(--sw-weight-normal, 400) !important;
}

/* =========================================================================
   87. /SPEDIZIONI — L'INCHIOSTRO DEI CAMPI VA AL NERO
   -------------------------------------------------------------------------
   Nome, valore e segnaposto passano al nero pieno. Erano tre grigi diversi —
   etichetta #72809 6, guida #7e8da3, valore #0b1937 — e adesso sono un colore
   solo, #000.

   Due avvertenze che restano scritte qui perche' sono la parte che si dimentica:

   1. **Solo in chiaro.** In scuro il fondo del campo e' #1e293b: un testo nero
      sparirebbe. Tutta la sezione e' sotto la stessa guardia che usa la 73 —
      quattro modi diversi di dire «tema scuro», perche' questo sito li usa
      tutti e tre piu' l'attributo.
   2. **`-webkit-text-fill-color` batte `color`.** Su questa pagina c'e' gia'
      chi lo usa, e vince anche a specificita' piu' bassa perche' e' una
      proprieta' diversa. Va spento insieme al colore, o il campo resta del
      colore di prima e la regola sembra non essere arrivata.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____):not([data-theme="dark"]):not([data-bs-theme="dark"]) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:not(.dark-mode):not(.dark):not(.theme-dark) :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] {
  /* i due token che etichette e guida leggono gia' */
  --sw-label-ink: #000;
  --sw-placeholder-ink: #000;
}

/* il valore scritto nel campo */
html:not(#_):not(#__):not(#___):not(#____):not([data-theme="dark"]):not([data-bs-theme="dark"]) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:not(.dark-mode):not(.dark):not(.theme-dark) :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(.form-control, .form-select, textarea.form-control, select, .select2-selection__rendered, .select2-search__field, .log-input, .log-select-btn .country-name):not(#tos_text) {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* il segnaposto (pseudo-elemento: non eredita, vuole la sua regola) */
html:not(#_):not(#__):not(#___):not(#____):not([data-theme="dark"]):not([data-bs-theme="dark"]) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:not(.dark-mode):not(.dark):not(.theme-dark) :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(.form-control, .form-select, textarea, select, .log-input)::placeholder {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
}

/* l'etichetta, ferma o salita, e le poche fisse */
html:not(#_):not(#__):not(#___):not(#____):not([data-theme="dark"]):not([data-bs-theme="dark"]) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:not(.dark-mode):not(.dark):not(.theme-dark) :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(.form-floating > label, .form-label, .select2-floating > label, .nd-input-addon-group label, .taric-row label, .log-input-inner-label, .log-label, .sw-picker__label) {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* L'asterisco resta rosso: e' un segno, non testo. La 72 lo aveva gia' messo
   in chiaro su tutti e 65, e `-webkit-text-fill-color` del genitore scende
   nei figli — quindi va ridichiarato qui, o il rosso se lo mangia il nero. */
html:not(#_):not(#__):not(#___):not(#____):not([data-theme="dark"]):not([data-bs-theme="dark"]) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:not(.dark-mode):not(.dark):not(.theme-dark) :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(label, .form-label) .text-danger {
  color: var(--sw-danger, #d92336) !important;
  -webkit-text-fill-color: var(--sw-danger, #d92336) !important;
}

/* In scuro quel token non lo dichiarava nessuno: la 73 lo mette solo in
   chiaro, e `color: var(--sw-placeholder-ink, var(--sw-muted))` non trovava
   niente da sostituire. Una dichiarazione che non si risolve non «torna al
   grigio»: decade, e per una proprieta' ereditata come `color` significa
   prendere quello del genitore — nero. L'etichetta si leggeva lo stesso solo
   perche' a dipingerla era `-webkit-text-fill-color`, che arrivava da
   un'altra regola. Un colore che sopravvive per via di una proprieta'
   diversa e' un colore che prima o poi sparisce: qui il token c'e'. */
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms),
html[data-bs-theme="dark"] body.nedate-ui-standard[class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms),
html body.nedate-ui-standard.dark-mode[class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) {
  --sw-placeholder-ink: #8fa1b8;
}

/* =========================================================================
   88. /SPEDIZIONI — LO STATO VUOTO DEL PASSO «SCEGLI IL CORRIERE»
   -------------------------------------------------------------------------
   Tre versioni, e ha vinto la piu' corta.

   C'era un riquadro con gli angoli a 14px e un disco rosa da 3rem attorno al
   camioncino: l'ultima bolla colorata della pagina. Poi l'ho squadrato e
   tratteggiato. Poi ci ho messo due righe fantasma con la sagoma della
   `.carrier-card`, per far vedere cosa sarebbe arrivato. Erano fedeli e
   inutili: una lista finta occupa lo spazio di una lista vera per non dire
   niente, e tocca pure guardarla ogni volta che si apre la pagina.

   Adesso e' una riga sola. Il camioncino piccolo davanti, la frase, il
   colore del testo di servizio. Niente cornice: la cornice ce l'ha gia' la
   card, e un riquadro dentro un riquadro per una frase e' rumore.

   L'unica distinzione che resta e' quella che conta: **«non abbiamo ancora
   chiesto» non e' «abbiamo chiesto e non c'e' niente»**. Dalla CSS i due
   stati sono identici — `#carrier_results` e' vuoto in tutti e due — quindi
   il JS marca il secondo (`rates-hint--answered`) e li' la frase passa al
   colore dell'inchiostro: e' una risposta, non un'attesa.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_hint {
  display: flex !important;
  align-items: center !important;
  /* in mezzo alla card: la riga non appartiene a una colonna, appartiene al
     posto vuoto dove arriveranno i corrieri */
  justify-content: center !important;
  text-align: center !important;
  gap: .55rem !important;
  /* staccata dal titolo: da quando sta in mezzo non e' piu' la coda del
     sottotitolo, e' il contenuto del posto vuoto */
  margin: 1rem 0 .35rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sw-muted) !important;
  font-size: 13px !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.45 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_hint::before {
  content: "\F5EA" !important;
  font-family: "bootstrap-icons" !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--sw-line-strong) !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

/* la risposta vuota parla un po' piu' forte dell'attesa */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_hint.rates-hint--answered {
  color: var(--sw-ink) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #carrier_hint.rates-hint--answered::before {
  color: var(--sw-muted) !important;
}

/* =========================================================================
   90. /SPEDIZIONI — IL RIEPILOGO VUOTO DICE UNA COSA SOLA
   -------------------------------------------------------------------------
   Finche' non c'e' una tariffa, la colonna di destra mostrava cinque righe di
   trattini (Da — A — Peso — Corriere — Tempi di consegna —) e un «Totale
   stimato €0,00». Sono numeri che non esistono: lo zero non e' un prezzo
   basso, e' l'assenza di un prezzo, e cinque trattini in fila sembrano un
   modulo che si e' rotto piu' che un riepilogo che aspetta.

   Nello stato vuoto resta la frase, e basta. Le righe e il totale tornano
   insieme al primo preventivo.

   Lo stato lo dice gia' il JS: quando arriva una tariffa mette `d-none` su
   `.summary_empty` (`summaryEmpty.classList.add('d-none')`) e riempie
   `.summary`. Qui si legge quella classe — nessuna riga di script in piu' — e
   il totale, che e' un fratello, si aggancia col combinatore `~`.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #shippingSummaryCard .summary_empty:not(.d-none) .shipping-summary-lines {
  display: none !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #shippingSummaryCard .summary_empty:not(.d-none) ~ .estimated_total {
  display: none !important;
}

/* Senza le righe sotto, la frase non ha piu' bisogno di spingere in basso:
   quel rientro serviva a staccarla dai trattini, che adesso non ci sono. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] #shippingSummaryCard .summary_empty:not(.d-none) .shipping-summary-empty-box {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================================
   91. /LOGIN — I QUATTRO VANTAGGI SUL TELEFONO
   -------------------------------------------------------------------------
   La lista stava attaccata al modulo — nessuno stacco sopra, solo un filo
   sotto ogni riga — e sembrava la coda del campo password. Dentro, ogni riga
   metteva titolo e descrizione **affiancati**: due colonne strette che
   andavano a capo tutte e due («Tracking in tempo / reale» accanto a «Traccia
   ogni spedizione in / tempo reale»), con in piu' un dischetto rosa da 40px,
   l'ultimo di quelli rimasti.

   Adesso: un filo sopra e aria, per dire che il modulo e' finito e comincia
   un'altra cosa; e ogni riga e' una riga vera — icona, titolo, e sotto la
   descrizione. Il dischetto sparisce, resta l'icona nel rosso del marchio.

   La card non gliela metto: la 57 ha reso questa pagina piatta sul telefono
   come /tracking, un riquadro qui sarebbe l'unico della pagina.
   ========================================================================= */
@media (max-width: 767.98px) {

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class][class] #loginPage .login-page__trust-strip {
    margin-top: 1.75rem !important;
    padding-top: 1.35rem !important;
    border-top: 1px solid var(--sw-line) !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class][class] #loginPage .login-page__trust-strip > div {
    display: grid !important;
    grid-template-columns: 1.5rem minmax(0, 1fr) !important;
    column-gap: .85rem !important;
    row-gap: .1rem !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: .9rem 0 !important;
  }

  /* l'icona: niente disco, niente fondo — solo il segno */
  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class][class] #loginPage .login-page__trust-strip > div > span {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--sw-brand-600, #d92336) !important;
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class][class] #loginPage .login-page__trust-strip > div > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: var(--sw-weight-semibold, 600) !important;
    line-height: 1.35 !important;
    color: var(--sw-ink) !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard.nedate-public-standard[class][class][class][class] #loginPage .login-page__trust-strip > div > small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: var(--sw-weight-regular, 400) !important;
    line-height: 1.45 !important;
    color: var(--sw-muted) !important;
    text-align: left !important;
  }
}


/* =========================================================================
   92. /PRIVACY, /TERMINI, /COOKIE — SOLO IL TITOLO E IL TESTO
   -------------------------------------------------------------------------
   Il contenuto di queste pagine e' dinamico: sta nella tabella `pages` e si
   cambia dal pannello. Tutto quello che le stava attorno — hero con titolo a
   effetto, tre tessere di vantaggi, scheda «in breve» con titolare del
   trattamento e tutele, barra degli strumenti in una card — era **contenuto
   legale scritto nel template**: nessuno lo aggiorna quando cambia il
   documento, e puo' finire per dire il contrario di cio' che c'e' sotto.

   Resta il titolo, la data, tre collegamenti di servizio e il testo, in una
   colonna da 68 caratteri: la misura a cui un documento si legge. Niente
   card, niente ombre: e' una pagina di testo, e una pagina di testo non ha
   bisogno di un contenitore che la dichiari tale.
   ========================================================================= */
/* La gabbia e' quella della home: `nedate-public-page` piu' `container-xl` nel
   markup, e qui solo il rientro in cima, che la home si prende dalla sua
   classe di pagina. Misurato su / a tre larghezze — 1440, 768, 390 — il testo
   parte a 69,4px, 21px e 19px dal bordo: adesso anche qui. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] {
  --nd-canon-card-radius: 0px;
  --nd-brand-radius-lg: 0px;
  /* La misura di lettura, scritta una volta: la usano la testata e il testo.
     Prima ce l'aveva solo il testo, e la riga sotto al titolo tagliava tutta
     la gabbia — 1360px di riga sopra una colonna da 522.
     Non in `ch`: quell'unita' si misura sul corpo dell'elemento che la usa, e
     la testata (che scrive piu' piccolo) veniva 464px contro i 522 del testo.
     37,3rem sono i 522px che 58 caratteri occupano a 15px, per tutti e due. */
  --sw-legal-measure: 37.3rem;
  padding-top: 8.25rem !important;   /* 115,5px: lo stesso della home */
  padding-bottom: 4rem !important;
}

/* --- la testata --- */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__head {
  max-width: var(--sw-legal-measure, 58ch) !important;
  margin-bottom: 2rem !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid var(--sw-line) !important;
}

html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__title {
  margin: 0 !important;
  font-family: var(--sw-font-display) !important;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  color: var(--sw-ink) !important;
}

html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__meta {
  margin: .55rem 0 0 !important;
  font-size: 13px !important;
  color: var(--sw-muted) !important;
}

html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__meta strong {
  font-weight: var(--sw-weight-semibold, 600) !important;
  color: var(--sw-ink) !important;
}

/* I tre collegamenti di servizio: testo, non pulsanti. Sono un ripiego per
   chi arriva qui da fuori, non azioni della pagina. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1.15rem !important;
  margin-top: 1rem !important;
}

html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__links :is(a, button) {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--sw-brand-600, #d92336) !important;
  font-size: 13px !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__links :is(a, button):hover {
  text-decoration: underline !important;
}

/* --- il testo ---
   I selettori del corpo portano due `:not(#___)` in piu' del resto della
   sezione, e non per vezzo: `nedate-unified.css` scrive `font-size: .9375rem`
   su ogni `p` dentro `#app3d > main` con tre identificatori nel selettore.
   Vinceva lui: la colonna di lettura era quella giusta, ma il testo restava a
   13,1px invece dei 15 dichiarati qui — misurato su /privacy, /termini e
   /cookie, dove la misura a 68 caratteri era calcolata su un corpo che non
   c'era. Con quattro identificatori la dichiarazione arriva davvero. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__body {
  /* `ch` non e' la larghezza di una lettera qualsiasi: e' quella dello zero,
     che in IBM Plex Sans e' piu' larga della media. Con 68ch le righe
     venivano davvero di **80 caratteri**, misurati sul testo reale — lunghe.
     58ch ne danno 68, che e' la misura che questa sezione voleva. */
  max-width: var(--sw-legal-measure, 58ch) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--sw-body) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__body :is(p, li) {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--sw-body) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__body :is(h2, h3) {
  margin-top: 2.25rem !important;
  margin-bottom: .55rem !important;
  font-size: 19px !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.3 !important;
  color: var(--sw-ink) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__body > :first-child {
  margin-top: 0 !important;
}

html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__empty {
  padding: 3rem 0 !important;
  color: var(--sw-muted) !important;
}

/* In scuro non c'e' piu' niente da riscrivere: l'inchiostro del testo e' il
   gettone `--sw-body`, che al buio diventa da solo #b6c4d6. Prima erano due
   valori scritti a mano (#3f4b5e e #c3cfe0) e un blocco da tre selettori. */

/* --- sulla carta ---------------------------------------------------------
   Il guscio ha un pulsante «Stampa», quindi la carta e' un uso previsto.
   Barra, menu e pie' di pagina li toglie gia' il mattone della stampa (§180);
   qui restavano i 115px di rientro in cima — pensati per non finire sotto la
   barra fissa, che sul foglio non c'e' — e i collegamenti di servizio, che
   stampati sono due parole morte. La colonna stretta invece resta: e' la
   misura di lettura, e vale anche su carta. */
@media print {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class] .legal-doc[class][class] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__links {
    display: none !important;
  }
}

/* --- sul telefono: stessi fianchi delle altre pagine --- */
@media (max-width: 767.98px) {
  /* Il rientro in cima non e' estetica: la navbar e' fissa e senza questo il
     titolo le finisce sotto. Stesso conto di /faq: altezza della barra, 15px
     d'aria, piu' la tacca del telefono. */
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] {
    /* In cima la home mette 71px (56 di barra fissa piu' 15 d'aria); ai lati
       5px, che col rientro del `container-xl` fanno i 19px del suo testo. */
    padding-top: calc(56px + 15px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 2.5rem !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__body {
    max-width: none !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] .legal-doc__head {
    margin-bottom: 1.5rem !important;
  }
}

/* =========================================================================
   93. /SPEDIZIONI — PALLINI E CASELLE IN RIGA COL PROPRIO TESTO
   -------------------------------------------------------------------------
   Misurato: il pallino stava **5,3px piu' in alto** del centro della riga di
   testo che gli sta accanto. Poco, ma su una riga di tre voci — Privato,
   Azienda, Punto di ritiro — si legge come un errore di stampa.

   Non li centro sul blocco, li centro sulla **prima riga**: `align-items:
   center` andrebbe bene finche' l'etichetta sta su una riga sola, ma dove ce
   ne sono due (il consenso ai Termini, il punto di ritiro con la sua nota) il
   quadratino finirebbe in mezzo al paragrafo. Il conto e' quello giusto in
   entrambi i casi: meta' della differenza fra l'altezza della riga e quella
   del controllo.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] .form-check {
  align-items: flex-start !important;
}

/* Lo scarto e' misurato, non calcolato: l'etichetta ha 4,8px di rientro suo in
   cima e il testo sta al centro di una riga da 22,5px, mentre il controllo e'
   alto 20. Il conto in `em` non torna — l'`em` del controllo (14,4px, eredita
   dal `.small` della riga) non e' quello dell'etichetta (15px) — quindi il
   valore sta in un token, misurato sulla pagina vera. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields)[class][class] {
  --sw-check-offset: 5.3px;
  --sw-switch-offset: 4.5px;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] .form-check > .form-check-input {
  margin-top: var(--sw-check-offset, 5.3px) !important;
  margin-bottom: 0 !important;
}

/* L'interruttore ha gia' un `margin-top: .1rem` nella 78, con un selettore che
   pesa piu' di questo: qui si pareggia la forma di quel selettore, o non
   arriva. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] .form-check.form-switch[class] input.form-check-input[type="checkbox"] {
  margin-top: var(--sw-switch-offset, 4.5px) !important;
}

/* =========================================================================
   94. /SPEDIZIONI — LO STATO VUOTO DEGLI ACCESSORI, COME QUELLO DEI CORRIERI
   -------------------------------------------------------------------------
   Stessa forma della riga del passo 3: icona piccola, frase in mezzo alla
   card, colore del testo di servizio. Due stati vuoti sulla stessa pagina che
   si somigliano sono una regola; due che si somigliano a meta' sono una
   distrazione.

   Il paragrafo prima stava dentro il blocco del titolo, in una colonna
   stretta: da li' non poteva centrarsi su niente. Nel markup e' uscito di un
   livello.
   ========================================================================= */
/* `:not(.d-none)`: il JS nasconde questo paragrafo con la classe di Bootstrap,
   che e' `display:none!important` ma pesa una classe sola — il mio
   `display:flex!important` la batterebbe e il messaggio resterebbe in pagina
   anche quando gli accessori ci sono. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields)[class][class] .accNoAccessoriesMsg:not(.d-none) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: .55rem !important;
  margin: 1rem 0 .35rem !important;
  color: var(--sw-muted) !important;
  font-size: 13px !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.45 !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields)[class][class] .accNoAccessoriesMsg:not(.d-none)::before {
  content: "\F4FD" !important;   /* bi-plus-square */
  font-family: "bootstrap-icons" !important;
  flex: 0 0 auto !important;
  color: var(--sw-line-strong) !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

/* =========================================================================
   97. /SPEDIZIONI — LA PAGINA SOTTO LA BARRA DELLA RICERCA CITTA'
   -------------------------------------------------------------------------
   A schermo intero, finche' non si scrivono due lettere, l'elenco non esiste:
   restava mezzo telefono di bianco sotto il campo, senza una parola. E quando
   l'elenco esiste ma e' vuoto — nessun comune trovato, paese non ancora
   scelto, ricerca fallita — il messaggio era una riga di testo piccola
   appoggiata in alto a sinistra, che a schermo intero si perde.

   Adesso lo spazio parla: un segno e una frase in mezzo alla pagina, in tutti
   e due i casi. Il suggerimento sparisce da solo quando l'elenco si apre.
   ========================================================================= */
@media (max-width: 959.98px) {

  html body.nedate-ui-standard[class][class][class][class] .ship-sheet__body {
    display: grid !important;
    place-items: center !important;
    padding: 0 2rem !important;
  }

  html body.nedate-ui-standard[class][class][class][class] .ship-sheet__hint {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .75rem !important;
    margin-top: -12vh !important;   /* un po' sopra il centro esatto: sotto c'e' la tastiera */
    color: var(--sw-muted) !important;
    text-align: center !important;
  }

  html body.nedate-ui-standard[class][class][class][class] .ship-sheet__hint > i {
    font-size: 2rem !important;
    line-height: 1 !important;
    color: var(--sw-line-strong) !important;
  }

  html body.nedate-ui-standard[class][class][class][class] .ship-sheet__hint > p {
    margin: 0 !important;
    max-width: 22ch !important;
    font-size: 14px !important;
    font-weight: var(--sw-weight-normal, 400) !important;
    line-height: 1.5 !important;
  }

  /* quando l'elenco si apre il suggerimento non serve piu' */
  html body.nedate-ui-standard[class][class][class][class] .ship-sheet:has(.city-dd.open) .ship-sheet__hint {
    display: none !important;
  }

  /* Nessun comune, paese non scelto, ricerca fallita: stessa forma del
     suggerimento, al posto della lista. */
  html body.nedate-ui-standard[class][class][class][class] .ship-sheet .city-dd .empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .75rem !important;
    min-height: 55vh !important;
    padding: 0 2rem !important;
    color: var(--sw-muted) !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: var(--sw-weight-normal, 400) !important;
  }

  html body.nedate-ui-standard[class][class][class][class] .ship-sheet .city-dd .empty::before {
    content: "\F64C" !important;   /* bi-pin-map */
    font-family: "bootstrap-icons" !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    color: var(--sw-line-strong) !important;
  }
}

/* =========================================================================
   98. /SPEDIZIONI — SUL TELEFONO IL CONTENUTO PARTE DALL'ALTO COME DA SINISTRA
   -------------------------------------------------------------------------
   Misurato a 390px: dal bordo sinistro della card al contenuto ci sono 14px;
   dall'alto 32,9 — 17,5 di rientro della card piu' 15,4 del suo corpo. Due
   margini diversi per lo stesso angolo, e il titolo del passaggio sembrava
   spinto giu' senza motivo.

   Adesso il rientro in cima e' lo stesso dei fianchi: 14px, cioe' `1rem`, il
   valore che la 79 usa gia' a destra e a sinistra. Vale per tutte le card del
   modulo, non solo per quella del mittente.
   ========================================================================= */
@media (max-width: 959.98px) {

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#shippingForm > .card, .card.sender-box, .card.receiver-box, .card.pickup-box) {
    padding-top: 0 !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(#shippingForm > .card, .card.sender-box, .card.receiver-box, .card.pickup-box) > :is(.card-body, .h-100 > .card-body) {
    padding-top: 1rem !important;
  }

  /* le due schede mittente/destinatario hanno un guscio in mezzo */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper[class][class] :is(.card.sender-box, .card.receiver-box, .card.pickup-box) > .h-100 > .card-body {
    padding-top: 1rem !important;
  }
}

/* =========================================================================
   99. /SPEDIZIONI — LA PAGINA FINISCE SOPRA LA BARRA, NON SOTTO
   -------------------------------------------------------------------------
   La barra del riepilogo su telefono e' `position: fixed; bottom: 0` ed e'
   alta 69,6px: sta sopra la pagina, non dentro. In fondo al footer c'erano
   28px di rientro, quindi l'ultima riga — «© 2026 SpedireWeb Srl» — finiva
   dietro la barra e non si riusciva a leggerla nemmeno scorrendo fino in
   fondo, perche' la barra scorre con lo schermo.

   Il footer si allunga di quanto serve: altezza della barra, un po' d'aria e
   la tacca in basso dei telefoni senza tasto.
   ========================================================================= */
@media (max-width: 959.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:has(#mobileSummaryBar) footer.nedate-site-footer {
    --sw-mobile-bar-h: 70px;
    padding-bottom: calc(var(--sw-mobile-bar-h) + 1.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =========================================================================
   100. AVVISI — UNA FORMA SOLA PER TUTTI
   -------------------------------------------------------------------------
   Era la regola dell'avviso «Serve SDI oppure PEC» (ex 82), scritta per un
   riquadro solo: icona centrata sul testo invece che appesa in alto, grande
   abbastanza da leggersi come un segno, e spigoli vivi come ogni altra
   superficie. Adesso e' il modo in cui si comporta **ogni** avviso, in tutte
   le pagine che caricano questo foglio.

   Due cautele nella scrittura:

   1. **`display: flex` solo dove serve.** Un avviso che comincia con
      un'icona e' una riga: icona, testo. Un avviso che comincia con un
      paragrafo o contiene una lista e' un blocco, e forzarlo in riga lo
      romperebbe. La condizione e' `:has(> i:first-child)`.
   2. **Il colore non si tocca.** Info, attenzione, errore e conferma
      continuano a dire quello che dicevano: qui cambia solo la geometria.
   ========================================================================= */
html body.nedate-ui-standard[class][class][class] .alert {
  border-radius: 5px !important;
}

html body.nedate-ui-standard[class][class][class] .alert:is(:has(> i:first-child), :has(> .bi:first-child), :has(> svg:first-child)) {
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
}

html body.nedate-ui-standard[class][class][class] .alert > :is(i, .bi, svg):first-child {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

/* =========================================================================
   101. GLI ERRORI DI CAMPO — UN SEGNO, NON UN BOLLINO
   -------------------------------------------------------------------------
   Il messaggio portava davanti un disco rosso pieno da 14px col punto
   esclamativo dentro: sotto quattro campi sbagliati diventavano quattro
   pastiglie rosse in colonna, piu' forti del testo che dovevano introdurre.
   Il segno serve (il colore da solo non basta, WCAG 1.4.1) ma puo' essere un
   contorno: stessa informazione, meta' del rumore.

   Resta tutto attaccato alla riga di testo — nessuna regola su `display`,
   perche' in Bootstrap il messaggio e' nascosto finche' l'errore non c'e', e
   forzarlo qui lo farebbe comparire sempre.
   ========================================================================= */
html body.nedate-ui-standard[class][class][class][class][class] .invalid-feedback {
  margin-top: 5px !important;
  font-size: 13px !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.45 !important;
}

html body.nedate-ui-standard[class][class][class][class][class] .invalid-feedback::before {
  content: "\F333" !important;   /* bi-exclamation-circle, di contorno */
  font-family: "bootstrap-icons" !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin-right: 5px !important;
  vertical-align: -2px !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--sw-danger) !important;
  -webkit-text-fill-color: var(--sw-danger) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* =========================================================================
   102. LO STATO DI ERRORE DEI CAMPI — LO STESSO ROSSO, SU TUTTI
   -------------------------------------------------------------------------
   Fatta scattare la validazione e misurato quello che si accende:

   1. **I campi misura non si accendevano affatto.** Peso, altezza, larghezza
      e profondita' hanno l'`is-invalid` sull'input, ma la cornice non e' sua:
      sta sul `.nd-input-addon-group` che lo contiene insieme all'unita' (kg,
      cm). Risultato: messaggio rosso sotto un campo grigio, come se
      l'errore fosse di un altro.
   2. **Due rossi diversi.** Undici campi a `rgb(200,30,50)` — il rosso del
      sistema — e tre a `rgb(239,68,68)`: i widget del paese, che hanno una
      regola loro con un colore scritto a mano.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .nd-input-addon-group:has(.is-invalid) {
  border-color: var(--sw-danger) !important;
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.select2-selection.is-invalid, .select2-container.is-invalid .select2-selection, .is-invalid > .select2-selection, .select2-container--default .select2-selection--single.is-invalid) {
  border-color: var(--sw-danger) !important;
}

/* La casella di spunta dei Termini prendeva il rosso di Bootstrap
   (`--bs-form-invalid-border-color`), l'ultimo dei tre rossi in circolazione. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .form-check-input.is-invalid {
  border-color: var(--sw-danger) !important;
}

/* =========================================================================
   103. L'ETICHETTA CHE SALE — IL MOVIMENTO SI VEDE
   -------------------------------------------------------------------------
   Fra i due stati l'etichetta cambia tre cose: la misura (15px → 11px), la
   posizione verticale (`top` dal centro del campo a 0) e la spaziatura. In
   transizione pero' c'erano solo le prime due: **`top` non era in lista**,
   quindi la parte piu' visibile del gesto — la salita — scattava di colpo
   mentre il resto scorreva. Sembrava un difetto di resa, era una proprieta'
   dimenticata.

   Adesso `top` e' in transizione insieme alle altre, su una curva che parte
   svelta e si posa piano (`cubic-bezier(.2,.7,.3,1)`), 200ms. Misurata la
   salita fotogramma per fotogramma: 29 → 20,8 → 6,2 → 2,6 → 0,5 → 0.

   Chi ha chiesto al sistema operativo meno animazioni non la vede muoversi:
   resta il cambio di colore, che serve a capire dove si e' finiti.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .ship-sheet, .ship-fields[class][class], .sw-forms[class][class]) .form-floating > label {
    transition: color .16s ease !important;
  }
}

/* =========================================================================
   104. L'AVVISO PER CHI NON HA FATTO L'ACCESSO
   -------------------------------------------------------------------------
   Una modale al centro, non un messaggio in un angolo: la rubrica e'
   un'azione che l'utente ha appena chiesto, e la risposta va dove sta
   guardando. Forma di casa — fondo scuro, riquadro bianco a spigoli vivi,
   filo sottile, il rosso solo sul pulsante che porta avanti.

   Non e' `bootstrap.Modal`: su questa pagina `window.bootstrap` non esiste
   (Bootstrap arriva dal pacchetto Vite e non viene appoggiato su `window`),
   quindi l'API JS di Bootstrap lancerebbe un errore. Serve poco: un fondo, un
   riquadro, Esc e clic fuori.
   ========================================================================= */
html.ship-guest-modal-open, html.ship-guest-modal-open body { overflow: hidden !important; }

html body.nedate-ui-standard[class][class][class] .ship-guest-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

html body.nedate-ui-standard[class][class][class] .ship-guest-modal.is-open { display: flex; }

html body.nedate-ui-standard[class][class][class] .ship-guest-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 25, 55, .45);
  animation: shipGuestFade .16s ease both;
}

html body.nedate-ui-standard[class][class][class] .ship-guest-modal__panel {
  position: relative;
  width: min(28rem, 100%);
  padding: 1.75rem 1.75rem 1.5rem;
  border: 1px solid var(--sw-line);
  border-radius: 0;
  background: var(--sw-surface);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
  text-align: center;
  animation: shipGuestIn .18s cubic-bezier(.2, .7, .3, 1) both;
}

html body.nedate-ui-standard[class][class][class] .ship-guest-modal__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: .9rem;
  background: var(--sw-surface-2);
  color: var(--sw-brand-600, #d92336);
  font-size: 1.4rem;
  line-height: 1;
}

html body.nedate-ui-standard[class][class][class] .ship-guest-modal__title {
  margin: 0 0 .4rem;
  font-family: var(--sw-font-display);
  font-size: 1.125rem;
  font-weight: var(--sw-weight-bold, 700);
  line-height: 1.3;
  color: var(--sw-ink);
}

html body.nedate-ui-standard[class][class][class] .ship-guest-modal__text {
  margin: 0 auto 1.35rem;
  max-width: 26ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sw-muted);
}

html body.nedate-ui-standard[class][class][class] .ship-guest-modal__actions {
  display: flex;
  justify-content: center;
  gap: .6rem;
}

/* La modale vive attaccata al <body>, fuori dal guscio della pagina: la 76,
   che squadra i pulsanti, e' agganciata a `.shipping-page-wrapper` e qui non
   arriva. Il raggio va tolto con un peso che basti da solo. */
html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .ship-guest-modal__actions > :is(a, button) {
  min-width: 8rem;
  border-radius: 0 !important;
}

@keyframes shipGuestFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes shipGuestIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  html body.nedate-ui-standard[class][class][class] :is(.ship-guest-modal__panel, .ship-guest-modal__backdrop) { animation: none; }
}

html body.nedate-ui-standard[class][class][class] .ship-guest-modal__panel:focus { outline: none; }

/* =========================================================================
   106. GLI AVVISI «MODERNI» ENTRANO NEL SISTEMA
   -------------------------------------------------------------------------
   `alert-modern` e' il blocco che compare in cima ai moduli — errori di
   validazione, conferme, avvisi — su /accedi, /registrati e in tutte le
   pagine che usano `<x-alerts/>`. Era rimasto con la grafica di prima:
   raggio 12px, ombra morbida, e **quattro colori scritti a mano** che non
   sono quelli del sistema:

       successo  #10b981   invece di  #0d7d55
       errore    #ef4444   invece di  #c81e32
       attenzione#f59e0b   invece di  #b45309
       info      #3b82f6   invece di  #1e6fd9

   Il rosso #ef4444 era lo stesso che ho appena tolto dai campi in errore: la
   pagina diceva la stessa cosa in due rossi diversi a un centimetro di
   distanza. Qui i quattro tornano ai token, la barra di lato resta — e' un
   segno utile, si legge prima del testo — e il resto prende la forma di casa:
   spigoli vivi, filo sottile, nessuna ombra morbida.
   ========================================================================= */
html body.nedate-ui-standard[class][class][class][class] .alert-modern {
  border: 1px solid var(--sw-line) !important;
  border-left-width: 3px !important;
  border-radius: 0 !important;
  background: var(--sw-surface) !important;
  box-shadow: none !important;
  padding: 1rem 1.1rem !important;
}

html body.nedate-ui-standard[class][class][class][class] .alert-modern-success { border-left-color: var(--sw-success) !important; }
html body.nedate-ui-standard[class][class][class][class] .alert-modern-danger  { border-left-color: var(--sw-danger) !important; }
html body.nedate-ui-standard[class][class][class][class] .alert-modern-warning { border-left-color: var(--sw-warning) !important; }
html body.nedate-ui-standard[class][class][class][class] .alert-modern-info    { border-left-color: var(--sw-info) !important; }

/* La piastrella dell'icona: quadrata, tinta del colore che le compete. */
html body.nedate-ui-standard[class][class][class][class] .alert-modern .icon-box {
  flex: 0 0 auto !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 0 !important;
  font-size: 1.05rem !important;
}

html body.nedate-ui-standard[class][class][class][class] .alert-modern-success .icon-box { background: var(--sw-success-bg) !important; color: var(--sw-success) !important; }
html body.nedate-ui-standard[class][class][class][class] .alert-modern-danger  .icon-box { background: var(--sw-danger-bg)  !important; color: var(--sw-danger)  !important; }
html body.nedate-ui-standard[class][class][class][class] .alert-modern-warning .icon-box { background: var(--sw-warning-bg) !important; color: var(--sw-warning) !important; }
html body.nedate-ui-standard[class][class][class][class] .alert-modern-info    .icon-box { background: var(--sw-info-bg)    !important; color: var(--sw-info)    !important; }

/* Titolo e testo: la gerarchia la fanno peso e colore, non la misura. */
html body.nedate-ui-standard[class][class][class][class] .alert-modern h6 {
  margin-bottom: .25rem !important;
  font-size: 14px !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.35 !important;
  color: var(--sw-ink) !important;
}

html body.nedate-ui-standard[class][class][class][class] .alert-modern :is(.small, ul, p) {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--sw-muted) !important;
}

html body.nedate-ui-standard[class][class][class][class] .alert-modern ul {
  margin: 0 !important;
  padding-left: 1.1rem !important;
}

html body.nedate-ui-standard[class][class][class][class] .alert-modern .btn-close-custom {
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--sw-muted) !important;
  line-height: 1 !important;
}

/* =========================================================================
   107. LE QUATTRO VARIANTI DI AVVISO, NEI COLORI DI CASA
   -------------------------------------------------------------------------
   Accanto agli `alert-modern` (106) ci sono gli avvisi semplici di Bootstrap,
   quelli scritti direttamente nelle viste: `alert-warning` sotto il modulo di
   recupero password, `alert-success` per «ti abbiamo mandato il link», e cosi'
   via. Usavano la tavolozza di Bootstrap — un giallo e un verde che sul resto
   del sito non esistono — e quasi tutti portano `border-0 rounded-3` scritto
   nel markup: niente filo e angoli tondi, il contrario di tutto il resto.

   Qui prendono i token: fondo tenue, filo del colore che gli compete,
   inchiostro leggibile. Il raggio lo azzera gia' la 100.
   ========================================================================= */
html body.nedate-ui-standard[class][class][class][class] .alert-success:not(.alert-modern) {
  border: 1px solid color-mix(in srgb, var(--sw-success) 30%, transparent) !important;
  background: var(--sw-success-bg) !important;
  color: var(--sw-ink) !important;
}

html body.nedate-ui-standard[class][class][class][class] .alert-warning:not(.alert-modern) {
  border: 1px solid color-mix(in srgb, var(--sw-warning) 30%, transparent) !important;
  background: var(--sw-warning-bg) !important;
  color: var(--sw-ink) !important;
}

html body.nedate-ui-standard[class][class][class][class] .alert-danger:not(.alert-modern) {
  border: 1px solid color-mix(in srgb, var(--sw-danger) 30%, transparent) !important;
  background: var(--sw-danger-bg) !important;
  color: var(--sw-ink) !important;
}

html body.nedate-ui-standard[class][class][class][class] .alert-info:not(.alert-modern) {
  border: 1px solid color-mix(in srgb, var(--sw-info) 30%, transparent) !important;
  background: var(--sw-info-bg) !important;
  color: var(--sw-ink) !important;
}

/* L'icona che alcuni di questi portano davanti prende il colore del caso. */
html body.nedate-ui-standard[class][class][class][class] .alert-success:not(.alert-modern) > :is(i, .bi):first-child { color: var(--sw-success) !important; }
html body.nedate-ui-standard[class][class][class][class] .alert-warning:not(.alert-modern) > :is(i, .bi):first-child { color: var(--sw-warning) !important; }
html body.nedate-ui-standard[class][class][class][class] .alert-danger:not(.alert-modern)  > :is(i, .bi):first-child { color: var(--sw-danger)  !important; }
html body.nedate-ui-standard[class][class][class][class] .alert-info:not(.alert-modern)    > :is(i, .bi):first-child { color: var(--sw-info)    !important; }

/* =========================================================================
   110. LA RUBRICA — LA FINESTRA CHE NESSUNO AVEVA MAI VISTO
   -------------------------------------------------------------------------
   Finche' non si apriva (109) nessuno l'aveva guardata: era rimasta alla
   grafica di due giri fa, e con un difetto vero.

   **La lente sopra il testo.** Il foglio della pagina dava al campo
   `padding-left: 2.75rem` per fare spazio all'icona; qualcosa di piu' pesante
   lo riportava a **13,3px**, mentre la lente sta a 14px ed e' larga 14: il
   segnaposto partiva **dentro** l'icona. Adesso il rientro e' calcolato da
   dove finisce l'icona, e ha il peso per restare.

   Il resto entra nel sistema: spigoli vivi al posto dei 18px della finestra e
   dei 10 del campo, il filo dei campi al posto del blu-grigio, il pulsante di
   chiusura che smette di essere una pastiglia blu scuro, e l'elenco senza la
   cornice attorno — le righe si separano da sole.
   ========================================================================= */
/* Fuori dal guscio della pagina il token del bordo campi vale #7690b2, un
   blu-grigio piu' scuro: dentro la finestra i campi devono essere quelli
   della pagina, quindi il token si ridichiara qui. */
html body.nedate-ui-standard[class][class][class][class] #addressBookModal {
  --sw-field-border: #adbaca;
  --nd-form-standard-border: #adbaca;
}

html body.nedate-ui-standard[class][class][class][class] #addressBookModal .address-book-modal-content {
  border: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18) !important;
}

html body.nedate-ui-standard[class][class][class][class] #addressBookModal .address-book-modal-header {
  padding: 1.15rem 1.35rem !important;
  background: var(--sw-surface) !important;
  border-bottom: 1px solid var(--sw-line) !important;
}

html body.nedate-ui-standard[class][class][class][class] #addressBookModal .modal-title {
  font-family: var(--sw-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  color: var(--sw-ink) !important;
}

html body.nedate-ui-standard[class][class][class][class] #addressBookModal .address-book-modal-body {
  padding: 1.35rem !important;
  gap: .85rem !important;
}

/* --- il campo di ricerca --------------------------------------------- */
/* Qui non c'e' piu' niente: ricopiare i valori del campo di pagina — altezza,
   rientri, cornice, corpo — voleva dire tenere due elenchi allineati a mano, e
   uno dei due restava sempre indietro (l'etichetta salita era ferma in cima al
   campo perche' quella copia non aveva i 9px di stacco). La finestra ora porta
   `ship-fields`: la stessa marca che il guscio della pagina e la vista a tutto
   schermo dichiarano nel loro `:is(...)`, aggiunta a tutte e 91 le regole del
   modulo. Il campo della rubrica non somiglia a quello di pagina — e' quello
   di pagina, retto dalle stesse regole. */

/* --- l'elenco --------------------------------------------------------- */
html body.nedate-ui-standard[class][class][class][class] #addressBookModal .address-book-results {
  border: 0 !important;
  border-top: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

html body.nedate-ui-standard[class][class][class][class] #addressBookModal .address-book-results .list-group-item {
  border: 0 !important;
  border-bottom: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  padding: .85rem .25rem !important;
}

/* --- lo stato vuoto, come gli altri della pagina --- */
html body.nedate-ui-standard[class][class][class][class] #addressBookModal :is(.address-book-empty, .address-book-loading, .address-book-error) {
  flex-direction: column !important;
  gap: .5rem !important;
  min-height: 9rem !important;
  color: var(--sw-muted) !important;
  font-size: 14px !important;
}

html body.nedate-ui-standard[class][class][class][class] #addressBookModal .address-book-empty::before {
  content: "\F52A" !important;   /* bi-search */
  font-family: "bootstrap-icons" !important;
  font-size: 1.75rem !important;
  line-height: 1 !important;
  color: var(--sw-line-strong) !important;
}

/* --- il piede --------------------------------------------------------- */
html body.nedate-ui-standard[class][class][class][class] #addressBookModal .address-book-modal-footer {
  padding: 1rem 1.35rem !important;
  border-top: 1px solid var(--sw-line) !important;
}

html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] #addressBookModal .address-book-modal-footer .btn {
  min-width: 7rem !important;
  border: 1px solid var(--sw-line-strong) !important;
  border-radius: 0 !important;
  background: var(--sw-surface) !important;
  color: var(--sw-ink) !important;
  font-size: 13px !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}

/* L'etichetta dentro il campo non ha piu' regole sue: se le prende dalla
   marca `ship-fields`, come il resto del modulo. */


/* =========================================================================
   112. IL CAMPO DEL SITO — LE REGOLE DI /SPEDIZIONI ESCONO DAL LORO GUSCIO
   -------------------------------------------------------------------------
   Il sito aveva quattro campi diversi a seconda della pagina: 58px alti su
   /spedizioni e 51 su /contact-us, raggio 5px contro 10, filo #adbaca contro
   un grigio piu' scuro, Poppins contro IBM Plex Sans, valore di peso 300
   contro 500. Non erano scelte: erano strati di CSS diversi che vincevano su
   pagine diverse.

   Le regole buone c'erano gia' — tutte quelle scritte per /spedizioni — ma
   erano chiuse dentro `:is(.shipping-page-wrapper, .ship-sheet, .ship-fields)`.
   Qui non ne e' stata riscritta nemmeno una: al loro elenco di guscio si e'
   aggiunta una marca, `.sw-forms`, che il <main> porta su ogni pagina che non
   sia l'amministrazione. Sono 44 regole — campi, etichette, testo guida,
   tendine, select2, caselle e pallini, il gruppo con l'unita' — e valgono
   ovunque senza che un valore sia stato copiato due volte.

   La specificita' non si muove: `:is()` pesa quanto il suo argomento piu'
   forte, e `.sw-forms` e' una classe come `.shipping-page-wrapper`. Dove il
   guscio era scritto `[class][class]`, la marca entra della stessa forma.

   Le 37 regole che riguardano l'impaginazione di /spedizioni — le schede,
   i pulsanti tondi, i colli, la barra del riepilogo — restano dov'erano: non
   sono il campo, sono quella pagina.

   Si spegne togliendo `sw-forms` dal <main>: una parola.
   ========================================================================= */

/* Dove il campo ha un'icona dentro — /accedi, /registrati, /tracking — il
   rientro lo prende anche il valore, non solo l'etichetta: la 55 spostava
   l'etichetta a 2,85rem e lasciava il testo sotto l'icona. Le due misure
   sono la stessa, e adesso sono scritte insieme. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating:has(> .bi, > i[class*="bi-"]) > :is(.form-control, .form-select) {
  padding-left: 2.85rem !important;
}

/* =========================================================================
   113. LA BARRA LATERALE PARTE SOTTO LA NAVBAR — SU TUTTE LE PAGINE
   -------------------------------------------------------------------------
   La navbar desktop misura 72px. La barra leggeva `--nav-h`, che nel sito e'
   dichiarato **cinque volte con cinque valori diversi** — 56, 60, 64, 88 e
   ancora 88 — e finiva per ereditare gli 88: sedici pixel di vuoto fra la
   navbar e l'inizio della barra.

   La correzione c'era gia' ma era chiusa dentro `:has(.shipping-page-wrapper)`:
   per questo su /spedizioni la barra era a filo e su tutte le altre pagine no.
   Qui la stessa regola vale ovunque ci sia la barra, e il numero non e' piu'
   un token con cinque opinioni ma l'altezza vera della navbar.
   ========================================================================= */
@media (min-width: 960px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard.nedate-has-desktop-sidebar[class][class][class][class] .adm-sidebar:is(.expanded, .collapsed) {
    top: 72px !important;
    height: calc(100vh - 72px) !important;
    max-height: calc(100vh - 72px) !important;
  }
}

/* L'interlinea del valore: 1,25 come ogni campo del sito. Non sta nella
   regola del carattere perche' li' dentro c'e' anche la textarea, che di
   righe ne ha piu' d'una e la sua se la tiene. Serve al campo del preventivo
   in home, che non essendo un `.form-floating` non passa dalla regola della
   geometria e restava a 1,45. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms)[class][class] :is(.form-control, .form-select, select, .select2-selection__rendered, .select2-search__field, .log-input, textarea.form-control):not(#tos_text) {
  line-height: 1.25 !important;
}

/* La guida si centra sul campo: su /spedizioni il riferimento e' il token
   dell'altezza, perche' li' il guscio cresce quando la validazione ci appende
   dentro un messaggio. In home il guscio e' la scatola stessa, e la scatola e'
   alta 58px **cornici comprese**: il riquadro in cui l'etichetta si muove ne
   misura 56, e meta' di 58 la lasciava un pixel sotto il centro. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .ship-sheet, .ship-fields[class][class], .sw-forms[class][class]) :is(.log-input-inner-label, .log-label):has(~ .log-input[placeholder=" "]:placeholder-shown:not(:focus)) {
  top: 50% !important;
}

/* L'etichetta della textarea non fa piu' da guida sulla prima riga: sta in
   alto sempre, piena o vuota, e si porta dietro la fascia che nasconde il
   testo che le scorre sotto. Sta tutto nella sezione 220; qui restava solo
   il vecchio «scendi alla prima riga», che ora non ha piu' uno stato da
   servire. */

/* I rientri della textarea. L'altezza no — quella e' l'unica cosa che una
   textarea deve poter avere diversa — ma il ritmo interno si': con gli 0,95rem
   che le arrivavano da `nedate-form-system.css` il testo partiva quattro pixel
   piu' a sinistra dell'etichetta. Il selettore pesa come gli altri del
   sistema, o quella regola vince ancora. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper[class][class], .ship-sheet, .ship-fields[class][class], .sw-forms[class][class]) textarea.form-control:not(#tos_text) {
  padding: 26px 16px 8px 16px !important;
}

/* =========================================================================
   115. LA TESTATA DI UNA SCHEDA — UN COMPONENTE, NON UNA PER PAGINA
   -------------------------------------------------------------------------
   Riquadro dell'icona, occhiello, titolo, riga di servizio: e' la testata che
   hanno /contact-us, /tracking, /accedi, /faq e /tariffe, ognuna con i suoi
   nomi di classe e la sua copia di valori dentro `nedate-unified.css`.

   Qui la stessa cosa prende un nome che non parla di pagine — `.sw-card-header`
   con dentro `.sw-card-icon` e `.sw-kicker` — e le misure stanno scritte una
   volta sola. Le classi vecchie entrano nella lista man mano che le pagine
   vengono ripulite: il riquadro dell'icona lo fa gia'.

   La usa per prima la scheda «Tracking» del preventivo in home, che aveva un
   cerchio pallido con dentro un pacco: l'unico tondo in una pagina di spigoli,
   e per giunta diceva «pacco» dove serviva dire «dove».
   ========================================================================= */
html body.nedate-ui-standard[class][class][class][class] :is(.sw-card-icon, .contact-login-card-icon, .tracking-login-card-icon, .faq-login-card-icon, .pricing-login-card-icon) {
  display: inline-grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

html body.nedate-ui-standard[class][class][class][class] .sw-card-header {
  text-align: left !important;
}

/* La variante centrata: serve dove la testata sta sopra un modulo largo
   quanto la scheda e non accanto a nient'altro — la scheda «Tracking» del
   preventivo in home. Il riquadro dell'icona e' un elemento in linea, quindi
   segue l'allineamento del testo; la riga di servizio ha un `max-width`, e
   senza margini automatici resterebbe a sinistra dentro lo spazio centrato. */
html body.nedate-ui-standard[class][class][class][class] .sw-card-header--center {
  text-align: center !important;
}
html body.nedate-ui-standard[class][class][class][class] .sw-card-header--center > p {
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.nedate-ui-standard[class][class][class][class] .sw-card-header > .sw-card-icon {
  margin-bottom: 1.05rem !important;
}

html body.nedate-ui-standard[class][class][class][class] .sw-card-header > .sw-kicker {
  display: block !important;
  color: var(--sw-brand-700, #b5172a) !important;
  font-family: var(--sw-font-label) !important;
  font-size: .69rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

html body.nedate-ui-standard[class][class][class][class] .sw-card-header > h2 {
  margin: .35rem 0 !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display, "Archivo") !important;
  font-size: 1.65rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}

html body.nedate-ui-standard[class][class][class][class] .sw-card-header > p {
  max-width: 480px !important;
  margin: 0 !important;
  color: var(--sw-muted) !important;
  font-size: .84rem !important;
  line-height: 1.55 !important;
}

/* =========================================================================
   116. LA BARRA LATERALE — UNA SOLA, E LEGGIBILE
   -------------------------------------------------------------------------
   Con le copie di pagina via (118 regole fra `nedate-page-system.css` e
   `nedate-design-system.css`) e la seconda pelle globale di `page-system`
   tolta, la barra ha di nuovo un disegno solo: quello della 22 qui sopra.
   Restavano quattro cose che quella pelle copriva e che vanno dette qui.
   ========================================================================= */
@media (min-width: 960px) {
  /* Le icone erano navy su navy: nella barra chiusa sono l'unica cosa che
     resta, e non si vedevano. */
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] :is(.adm-sidebar, .nedate-sidebar) .sb-link i.main-icon {
    color: rgba(229, 238, 250, .72) !important;
    -webkit-text-fill-color: rgba(229, 238, 250, .72) !important;
    font-size: 1rem !important;
  }
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] :is(.adm-sidebar, .nedate-sidebar) .sb-link:hover i.main-icon,
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] :is(.adm-sidebar, .nedate-sidebar) .sb-link.active i.main-icon {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Ogni voce era una scatola piena: dodici pulsanti in colonna. Il fondo
     resta al passaggio del mouse e alla voce corrente, dove serve a dire
     qualcosa. */
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] :is(.adm-sidebar, .nedate-sidebar) .sb-link:not(:hover):not(.active):not([aria-current="page"]) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* «MENU» aveva un rettangolo chiaro dietro: il fondo e' della barra del
     titolo, non della parola. */
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .sb-panel-title {
    background: transparent !important;
  }

  /* Il pulsante che apre e chiude: un quadrato discreto, non una cornice
     grande quanto mezza intestazione. */
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .sb-panel-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: var(--sw-radius-xs, 8px) !important;
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(229, 238, 250, .8) !important;
  }
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .sb-panel-btn:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
  }
}

/* Il riquadro «Passa a Pro»: titolo e riga di servizio erano attaccati sulla
   stessa riga («Passa a ProTariffe migliori…») e il pulsante era una pillola
   schiacciata in un angolo. Tre righe di impaginazione. */
@media (min-width: 960px) {
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .sb-pro-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .55rem !important;
  }
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .sb-pro-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: .2rem !important;
  }
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .sb-pro-copy > strong {
    color: #fff !important;
    font-size: .82rem !important;
    font-weight: var(--sw-weight-semi, 600) !important;
    line-height: 1.2 !important;
  }
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .sb-pro-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: .35rem .6rem !important;
    text-decoration: none !important;
  }
  /* Il pallino delle notifiche sta a destra della voce, non appiccicato alla
     parola. */
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .sb-link .sb-notification-dot {
    margin-left: auto !important;
  }
}

@media (min-width: 960px) {
  /* Da chiusa la barra e' larga 48px: le intestazioni di sezione uscivano
     tagliate a meta' parola («PRINC…»). Da chiusa non servono: il divisore
     basta a dire che il gruppo e' finito. */
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .adm-sidebar.collapsed .sb-section-cap {
    display: none !important;
  }
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .adm-sidebar.collapsed .sb-divider {
    display: block !important;
    margin: .5rem .6rem !important;
  }
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .adm-sidebar.collapsed .sb-pro-card {
    display: none !important;
  }

  /* Il pallino delle notifiche era un rettangolo rosso alto e stretto. */
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .sb-notification-dot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: var(--sw-weight-bold, 700) !important;
    line-height: 1 !important;
  }
}

@media (min-width: 960px) {
  /* Da chiusa la voce e' larga 48px e l'icona sta in mezzo: il pallino, spinto
     a destra dal `margin-left: auto`, usciva dalla barra. Qui si appoggia
     all'angolo dell'icona, come fanno i contatori ovunque. */
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .adm-sidebar.collapsed .sb-link {
    position: relative !important;
  }
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class][class][class][class] .adm-sidebar.collapsed .sb-link .sb-notification-dot {
    position: absolute !important;
    top: 2px !important;
    right: 4px !important;
    margin-left: 0 !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    box-shadow: 0 0 0 2px var(--sw-navy-950, #070e1c) !important;
  }
}

/* =========================================================================
   117. LA BARRA SPINGE LA PAGINA, NON CI STA SOPRA
   -------------------------------------------------------------------------
   La barra e' `position: fixed`: da sola non occupa spazio, quindi il
   contenuto le finisce sotto. A spostarlo c'era uno script — `syncPadding()`
   in Alpine — che pero' lavora solo se la Blade ha scritto
   `data-sidebar-padding` sul contenitore, e quell'attributo c'e' **solo per
   gli utenti con l'email verificata**. Per tutti gli altri, e su ogni pagina
   che non lo dichiara, la barra copriva testo e piede.

   E dove il rientro c'era, non era della misura giusta: le due classi
   `content-pl-*` valgono 16rem e 4rem in `blade-views.css` (256 e 64px) e
   `var(--sidebar-*)` in `global.css`, mentre la barra misura 178 e 48. Fra
   spinta e barra restava un vuoto — o un pezzo di pagina sotto la barra.

   Qui il rientro e' del CSS e legge i token della barra: `:has()` guarda se la
   barra e' aperta o chiusa e sposta il contenitore **esattamente** della sua
   larghezza. Niente attributi, niente script, nessun vuoto: il piede sta
   dentro quel contenitore e si sposta con lui.
   ========================================================================= */
@media (min-width: 960px) {
  html body.nedate-ui-standard.nedate-has-desktop-sidebar:has(.adm-sidebar.expanded) #app3d {
    padding-left: var(--sb-w-open, 178px) !important;
  }
  html body.nedate-ui-standard.nedate-has-desktop-sidebar:has(.adm-sidebar.collapsed) #app3d {
    padding-left: var(--sb-w-closed, 48px) !important;
  }

  /* Le due classi storiche leggono gli stessi token, cosi' non tirano da
     un'altra parte nelle pagine che le usano ancora. */
  html body.nedate-ui-standard.nedate-has-desktop-sidebar .content-pl-expanded {
    padding-left: var(--sb-w-open, 178px) !important;
  }
  html body.nedate-ui-standard.nedate-has-desktop-sidebar .content-pl-collapsed {
    padding-left: var(--sb-w-closed, 48px) !important;
  }
}

/* Sotto i 992px la barra non c'e' (`d-none`): nessun rientro, o la pagina
   resterebbe spostata contro il nulla. */
@media (max-width: 959.98px) {
  html body.nedate-ui-standard.nedate-has-desktop-sidebar #app3d,
  html body.nedate-ui-standard.nedate-has-desktop-sidebar :is(.content-pl-expanded, .content-pl-collapsed) {
    padding-left: 0 !important;
  }
}

/* =========================================================================
   118. IL MENU DEL TELEFONO PARLA COME LA BARRA DEL DESKTOP
   -------------------------------------------------------------------------
   Il pannello a tutto schermo era gia' curato — i contrasti erano stati
   misurati uno per uno — ma diceva le stesse cose con un'altra voce: ogni
   icona dentro un riquadro grigio, la voce corrente segnata da una tinta piu'
   una barretta a sinistra, gli angoli a 14px e i due pulsanti in fondo
   arrotondati.

   Dopo la 116 la barra del desktop ha icone nude, la voce corrente piena di
   marca e angoli a 8. Qui si allinea a quella, tenendo i contrasti: icone al
   72% (6,7:1), voce corrente bianca su rosso pieno (5,1:1), e i pulsanti
   squadrati come tutti quelli del sito.

   Nessun `@media`: il pannello esiste solo quando e' aperto, e si apre dal
   pulsante che sta nella navbar. Chiuderlo dentro `max-width: 959.98px`
   voleva dire che a schermo un pelo piu' largo — un telefono girato, un
   tablet, una finestra ridimensionata — tornava a mostrare il disegno
   vecchio.
   ========================================================================= */
@media all {
  /* l'icona non ha piu' una scatola: e' un segno accanto alla parola */
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .drawer-sb .sb-link .main-icon {
    width: 24px !important;
    height: 24px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(229, 238, 250, .72) !important;
    -webkit-text-fill-color: rgba(229, 238, 250, .72) !important;
    font-size: 1.15rem !important;
  }

  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .drawer-sb .sb-link {
    gap: .85rem !important;
    min-height: 52px !important;
    padding: .6rem .85rem !important;
    border-radius: var(--sw-radius-xs, 8px) !important;
  }

  /* la voce corrente: piena, come sul desktop. La barretta a sinistra non
     serve piu' — ripeteva in piccolo quello che dice il fondo. */
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .drawer-sb .sb-link.active {
    color: #fff !important;
    background: var(--sw-brand-600) !important;
  }
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .drawer-sb .sb-link.active .main-icon {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    border: 0 !important;
  }
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .drawer-sb .sb-link.active::before {
    content: none !important;
  }

  /* i due pulsanti in fondo: squadrati come ogni pulsante del sito */
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .drawer-sb__cta {
    border-radius: 0 !important;
    min-height: 50px !important;
  }
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .drawer-sb__cta--primary {
    background: var(--sw-brand-600) !important;
    border-color: var(--sw-brand-600) !important;
    color: #fff !important;
  }

  /* il quadrato della X: stesso gesto del pulsante che apre e chiude la barra
     sul desktop */
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .drawer-sb__close {
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: var(--sw-radius-xs, 8px) !important;
    background: rgba(255, 255, 255, .06) !important;
  }

  /* le voci di secondo livello dell'amministrazione, allineate alla parola e
     non al riquadro che non c'e' piu' */
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .drawer-sb .sb-sub-link {
    padding-left: 2.7rem !important;
  }
}

/* =========================================================================
   119. IL CARRELLO NELLA NAVBAR
   -------------------------------------------------------------------------
   Il pannello del carrello non aveva stile: le sue 77 regole stanno in
   `global.css`, che **non e' caricato** — non compare nel `<head>` di nessuna
   pagina. Quindi il carrello usciva come lo disegna Bootstrap: una lista di
   righe una sotto l'altra, con i pezzi appiccicati e larga mezza pagina
   (`width: min(51rem, 100vw)`, un'altra cosa scritta in quel file morto).

   Qui e' riscritto nel foglio che il sito carica davvero, con i token del
   sistema — quindi il tema scuro viene da se' — e con gli stessi gesti del
   resto: superficie bianca a spigoli vivi, testata con riquadro di marca,
   stato vuoto centrato con una via d'uscita, pulsante pieno per l'azione
   principale.
   ========================================================================= */
html body.nedate-ui-standard .nedate-cart-dropdown {
  width: min(380px, calc(100vw - 1.5rem)) !important;
  max-width: min(380px, calc(100vw - 1.5rem)) !important;
  max-height: min(80vh, 40rem) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18) !important;
}

/* --- testata --- */
html body.nedate-ui-standard .nedate-cart-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  padding: 1rem 1.1rem !important;
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .nedate-cart-head-main {
  display: flex !important;
  align-items: flex-start !important;
  gap: .7rem !important;
  min-width: 0 !important;
}
html body.nedate-ui-standard .nedate-cart-head-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  font-size: 1rem !important;
}
html body.nedate-ui-standard .nedate-cart-title {
  display: block !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display, "Archivo") !important;
  font-size: 1rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.2 !important;
}
html body.nedate-ui-standard .nedate-cart-subtitle {
  display: block !important;
  margin-top: .15rem !important;
  color: var(--sw-muted) !important;
  font-size: .8rem !important;
  line-height: 1.35 !important;
}
html body.nedate-ui-standard .nedate-cart-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  color: var(--sw-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  font-size: .85rem !important;
}
html body.nedate-ui-standard .nedate-cart-close:hover {
  color: var(--sw-ink) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .06)) !important;
}

/* --- carrello vuoto: come gli altri stati vuoti del sito --- */
html body.nedate-ui-standard .nedate-cart-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: .35rem !important;
  padding: 2.2rem 1.4rem !important;
}
html body.nedate-ui-standard .nedate-cart-empty-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  margin-bottom: .35rem !important;
  color: var(--sw-line-strong) !important;
  font-size: 1.6rem !important;
}
html body.nedate-ui-standard .nedate-cart-empty > strong {
  color: var(--sw-ink) !important;
  font-size: .95rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard .nedate-cart-empty > span:not(.nedate-cart-empty-icon) {
  max-width: 15rem !important;
  color: var(--sw-muted) !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
}

/* --- conteggio --- */
html body.nedate-ui-standard .nedate-cart-count {
  padding: .7rem 1.1rem .3rem !important;
  color: var(--sw-muted) !important;
  font-size: .7rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

/* --- le righe --- */
html body.nedate-ui-standard .nedate-cart-items {
  display: block !important;
  max-height: 17rem !important;
  overflow-y: auto !important;
  padding: 0 .6rem !important;
}
html body.nedate-ui-standard .nedate-cart-item {
  display: flex !important;
  align-items: center !important;
  gap: .35rem !important;
  padding: .5rem .5rem !important;
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .nedate-cart-item:last-child { border-bottom: 0 !important; }
html body.nedate-ui-standard .nedate-cart-item-link {
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard .nedate-cart-carrier-mark {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  background: var(--sw-brand-100, #ffe3e4) !important;
  color: var(--sw-brand-700, #b5172a) !important;
  font-size: .72rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: .04em !important;
}
html body.nedate-ui-standard .nedate-cart-item-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: .1rem !important;
  /* prende lo spazio che avanza, cosi' il prezzo va a filo del bordo destro
     invece di restare attaccato al testo */
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body.nedate-ui-standard .nedate-cart-item-copy > strong {
  color: var(--sw-ink) !important;
  font-size: .875rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.25 !important;
}
html body.nedate-ui-standard .nedate-cart-item-copy > small {
  color: var(--sw-muted) !important;
  font-size: .75rem !important;
  line-height: 1.3 !important;
}
html body.nedate-ui-standard .nedate-cart-item-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  align-self: flex-start !important;
  margin-top: .2rem !important;
  color: var(--sw-muted) !important;
  font-size: .625rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .08em !important;
}
html body.nedate-ui-standard .nedate-cart-item-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  flex: 0 0 auto !important;
  text-align: right !important;
}
html body.nedate-ui-standard .nedate-cart-item-price > strong {
  color: var(--sw-ink) !important;
  font-size: .875rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  white-space: nowrap !important;
}
html body.nedate-ui-standard .nedate-cart-item-price > small {
  color: var(--sw-muted) !important;
  font-size: .65rem !important;
}
html body.nedate-ui-standard .nedate-cart-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  color: var(--sw-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  font-size: .85rem !important;
}
html body.nedate-ui-standard .nedate-cart-remove:hover {
  color: var(--sw-danger) !important;
  background: var(--sw-danger-soft, rgba(239, 68, 68, .1)) !important;
}

/* --- riepilogo --- */
html body.nedate-ui-standard .nedate-cart-summary {
  display: block !important;
  padding: .9rem 1.1rem !important;
  border-top: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .nedate-cart-summary-title {
  display: block !important;
  margin-bottom: .5rem !important;
  color: var(--sw-muted) !important;
  font-size: .7rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
html body.nedate-ui-standard .nedate-cart-summary-line {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: .2rem 0 !important;
  color: var(--sw-muted) !important;
  font-size: .82rem !important;
}
html body.nedate-ui-standard .nedate-cart-summary-line > strong {
  color: var(--sw-ink) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard .nedate-cart-total {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-top: .6rem !important;
  padding-top: .6rem !important;
  border-top: 1px solid var(--sw-line) !important;
  color: var(--sw-ink) !important;
  font-size: .9rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard .nedate-cart-total > span:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}
html body.nedate-ui-standard .nedate-cart-total strong {
  font-size: 1.15rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.1 !important;
}
html body.nedate-ui-standard .nedate-cart-total small {
  color: var(--sw-muted) !important;
  font-size: .65rem !important;
  font-weight: var(--sw-weight-normal, 400) !important;
}

/* --- azioni --- */
html body.nedate-ui-standard .nedate-cart-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
  padding: 0 1.1rem 1rem !important;
}
html body.nedate-ui-standard .nedate-cart-actions > form { margin: 0 !important; }
html body.nedate-ui-standard .nedate-cart-checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: .7rem 1rem !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: .9rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
}
html body.nedate-ui-standard .nedate-cart-checkout:hover { background: var(--sw-brand-700, #b5172a) !important; }
html body.nedate-ui-standard .nedate-cart-secondary-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  min-height: 42px !important;
  padding: .55rem 1rem !important;
  color: var(--sw-ink) !important;
  background: transparent !important;
  border: 1px solid var(--sw-line-strong) !important;
  border-radius: 0 !important;
  font-size: .85rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard .nedate-cart-secondary-action:hover {
  background: var(--sw-surface-2, rgba(15, 23, 42, .04)) !important;
}

/* --- la striscia delle garanzie --- */
html body.nedate-ui-standard .nedate-cart-benefits {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .6rem !important;
  padding: .8rem 1.1rem !important;
  border-top: 1px solid var(--sw-line) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .02)) !important;
}
html body.nedate-ui-standard .nedate-cart-benefits > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .12rem !important;
  text-align: center !important;
}
html body.nedate-ui-standard .nedate-cart-benefits > span > i {
  color: var(--sw-brand-600) !important;
  font-size: .95rem !important;
}
html body.nedate-ui-standard .nedate-cart-benefits > span > strong {
  color: var(--sw-ink) !important;
  font-size: .7rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.2 !important;
}
html body.nedate-ui-standard .nedate-cart-benefits > span > small {
  color: var(--sw-muted) !important;
  font-size: .62rem !important;
  line-height: 1.25 !important;
}

/* =========================================================================
   120. LE NOTIFICHE NELLA NAVBAR
   -------------------------------------------------------------------------
   Stessa storia del carrello: 118 regole in `global.css`, il foglio che
   nessuna pagina carica. Il pannello usciva come una lista di righe attaccate
   — filtri, riquadri delle categorie e voci tutti allo stesso peso.

   Qui e' scritto nel foglio che il sito carica, con gli stessi gesti del
   carrello: e' il suo vicino di navbar e non ha motivo di parlare un'altra
   lingua. Tutto sui token, quindi il tema scuro viene da se'.
   ========================================================================= */
html body.nedate-ui-standard .nedate-notification-dropdown {
  width: min(400px, calc(100vw - 1.5rem)) !important;
  max-width: min(400px, calc(100vw - 1.5rem)) !important;
  max-height: min(82vh, 42rem) !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18) !important;
}

/* --- testata, come quella del carrello --- */
html body.nedate-ui-standard .nedate-notification-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: .75rem !important;
  padding: 1rem 1.1rem !important;
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .nedate-notification-head-main {
  display: flex !important;
  align-items: flex-start !important;
  gap: .7rem !important;
  min-width: 0 !important;
}
html body.nedate-ui-standard .nedate-notification-head-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  background: var(--sw-brand-600) !important;
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  font-size: 1rem !important;
}
html body.nedate-ui-standard .nedate-notification-title {
  display: block !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display, "Archivo") !important;
  font-size: 1rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.2 !important;
}
html body.nedate-ui-standard .nedate-notification-subtitle {
  display: block !important;
  margin-top: .15rem !important;
  color: var(--sw-muted) !important;
  font-size: .8rem !important;
  line-height: 1.35 !important;
}
html body.nedate-ui-standard :is(.nedate-notification-close, .nedate-notification-markall) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 .45rem !important;
  color: var(--sw-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  font-size: .85rem !important;
}
html body.nedate-ui-standard :is(.nedate-notification-close, .nedate-notification-markall):hover {
  color: var(--sw-ink) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .06)) !important;
}

/* --- i filtri: una fila di pastiglie che scorre --- */
html body.nedate-ui-standard .nedate-notification-filters {
  display: flex !important;
  gap: .35rem !important;
  padding: .7rem 1.1rem !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .nedate-notification-filters::-webkit-scrollbar { display: none !important; }
html body.nedate-ui-standard .nedate-notification-filter {
  flex: 0 0 auto !important;
  padding: .32rem .6rem !important;
  /* sono link: in tema scuro prendono il colore dei link, che e' di marca —
     e sei pastiglie rosse in fila sembrano tutte accese */
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  background: transparent !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  font-size: .72rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
html body.nedate-ui-standard .nedate-notification-filter:hover {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  border-color: var(--sw-line-strong) !important;
}
html body.nedate-ui-standard .nedate-notification-filter.is-active {
  /* Il colore lo decide il sistema: in tema scuro il rosso schiarisce e sopra
     ci va inchiostro scuro (4,95:1), non bianco. Serve pero' anche il
     `-webkit-text-fill-color`, perche' le pastiglie sono link e per i link
     c'e' una regola di tema che dipinge il riempimento del glifo — e quella
     batte `color`. */
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
}

/* --- i quattro riquadri delle categorie --- */
html body.nedate-ui-standard .nedate-notification-overview {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .45rem !important;
  padding: .8rem 1.1rem !important;
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .nedate-notification-overview-card {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .55rem .6rem !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .03)) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard .nedate-notification-overview-card:hover {
  border-color: var(--sw-line-strong) !important;
}
html body.nedate-ui-standard .nedate-notification-overview-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  background: var(--sw-brand-100, #ffe3e4) !important;
  color: var(--sw-brand-700, #b5172a) !important;
  font-size: .8rem !important;
}
html body.nedate-ui-standard .nedate-notification-overview-card > span:last-child {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
html body.nedate-ui-standard .nedate-notification-overview-card strong {
  color: var(--sw-ink) !important;
  font-size: .78rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.15 !important;
}
html body.nedate-ui-standard .nedate-notification-overview-card small {
  color: var(--sw-muted) !important;
  font-size: .68rem !important;
}

/* --- l'elenco --- */
html body.nedate-ui-standard .nedate-notification-list {
  display: block !important;
  max-height: 19rem !important;
  overflow-y: auto !important;
  padding: 0 !important;
}
html body.nedate-ui-standard .nedate-notification-section-label {
  padding: .7rem 1.1rem .3rem !important;
  color: var(--sw-muted) !important;
  font-size: .68rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
html body.nedate-ui-standard .nedate-notification-item {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: .7rem !important;
  padding: .7rem 1.1rem !important;
  border-bottom: 1px solid var(--sw-line) !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard .nedate-notification-item:hover {
  background: var(--sw-surface-2, rgba(15, 23, 42, .03)) !important;
}
/* la non letta si riconosce da un filo di marca a sinistra, non da un fondo
   che copre mezzo pannello */
html body.nedate-ui-standard .nedate-notification-item.is-unread {
  box-shadow: inset 3px 0 0 var(--sw-brand-600) !important;
}
html body.nedate-ui-standard .nedate-notification-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  background: var(--sw-brand-100, #ffe3e4) !important;
  color: var(--sw-brand-700, #b5172a) !important;
  font-size: .85rem !important;
}
html body.nedate-ui-standard .nedate-notification-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: .12rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body.nedate-ui-standard .nedate-notification-item-title {
  color: var(--sw-ink) !important;
  font-size: .85rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.3 !important;
}
html body.nedate-ui-standard .nedate-notification-body {
  color: var(--sw-muted) !important;
  font-size: .78rem !important;
  line-height: 1.4 !important;
}
html body.nedate-ui-standard .nedate-notification-time {
  color: var(--sw-muted) !important;
  font-size: .68rem !important;
}
html body.nedate-ui-standard .nedate-notification-action {
  flex: 0 0 auto !important;
  align-self: center !important;
  padding: .2rem .45rem !important;
  color: var(--sw-brand-700, #b5172a) !important;
  background: var(--sw-brand-100, #ffe3e4) !important;
  font-size: .66rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
html body.nedate-ui-standard .nedate-notification-arrow {
  flex: 0 0 auto !important;
  align-self: center !important;
  color: var(--sw-line-strong) !important;
  font-size: .7rem !important;
}

/* --- niente di nuovo: lo stato vuoto degli altri pannelli --- */
html body.nedate-ui-standard .nedate-notification-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: .3rem !important;
  padding: 2.2rem 1.4rem !important;
}
html body.nedate-ui-standard .nedate-notification-empty-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  margin-bottom: .3rem !important;
  color: var(--sw-line-strong) !important;
  font-size: 1.6rem !important;
}
html body.nedate-ui-standard .nedate-notification-empty > span.fw-bold {
  color: var(--sw-ink) !important;
  font-size: .95rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard .nedate-notification-empty > span:not(.fw-bold):not(.nedate-notification-empty-icon) {
  max-width: 15rem !important;
  color: var(--sw-muted) !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
}

/* --- il piede: due vie, divise da un filo --- */
html body.nedate-ui-standard .nedate-notification-footer {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-top: 1px solid var(--sw-line) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .02)) !important;
}
html body.nedate-ui-standard .nedate-notification-footer-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  min-height: 46px !important;
  padding: .6rem .8rem !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  font-size: .8rem !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard .nedate-notification-footer-link strong {
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard .nedate-notification-footer-link + .nedate-notification-footer-link {
  border-left: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .nedate-notification-footer-link:hover {
  color: var(--sw-brand-700, #b5172a) !important;
  -webkit-text-fill-color: var(--sw-brand-700, #b5172a) !important;
  background: var(--sw-surface) !important;
}

/* =========================================================================
   122. SUL TELEFONO I DUE PANNELLI DELLA NAVBAR DIVENTANO SCHERMATE
   -------------------------------------------------------------------------
   Carrello e notifiche sono due tendine da 380-400px: su uno schermo da 390
   restano appese a un angolo, con il contenuto stretto e il resto della
   pagina che si intravede dietro. Sotto i 992px diventano quello che sono
   davvero — una schermata: larghe quanto lo schermo, alte fino in fondo, e
   che partono **esattamente sotto la navbar**.

   L'altezza della navbar cambia con la larghezza (56, 62, 72px) ed e' scritta
   in `--sw-nav-height`, che il corpo della pagina ridichiara a ogni soglia:
   letto qui dentro vale sempre quello giusto — controllato a 390, 768, 991 e
   1280.

   Le tendine sono posizionate da Popper con stili in linea (`position`,
   `inset`, `transform`): le dichiarazioni qui sono `!important`, che su uno
   stile in linea senza `!important` vince.
   ========================================================================= */
@media (max-width: 959.98px) {
  /* `.show`: senza, `display: flex` qui sotto batteva il `display: none` con
     cui Bootstrap tiene chiuse le tendine, e il pannello restava aperto a
     schermo intero sopra ogni pagina. */
  html body.nedate-ui-standard :is(.nedate-cart-dropdown, .nedate-notification-dropdown).show {
    position: fixed !important;
    top: var(--sw-nav-height, 56px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
    border-top: 1px solid var(--sw-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* l'elenco prende lo spazio che avanza e scorre dentro di se': cosi' la
     testata resta in cima e le azioni in fondo, senza che la schermata
     intera scorra sotto le dita */
  html body.nedate-ui-standard .show :is(.nedate-cart-items, .nedate-notification-list) {
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  /* quello che deve restare in fondo ci resta anche quando il contenuto e'
     poco — carrello vuoto compreso */
  html body.nedate-ui-standard .show :is(.nedate-cart-actions, .nedate-notification-footer) {
    margin-top: auto !important;
  }
  html body.nedate-ui-standard .show .nedate-cart-empty {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }
  html body.nedate-ui-standard .show .nedate-notification-empty {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  /* sullo schermo pieno c'e' spazio: le garanzie del carrello e i quattro
     riquadri delle notifiche respirano un po' di piu' */
  html body.nedate-ui-standard .show .nedate-cart-benefits { padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important; }
  html body.nedate-ui-standard .show .nedate-notification-footer { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
}

/* =========================================================================
   123. (RITIRATA) LA DASHBOARD, PRIMA STESURA
   -------------------------------------------------------------------------
   Qui c'era la dashboard vestita con la lingua di /spedizioni — piatta e
   squadrata. E' stata rifatta con quella della /faq (124), e la Blade non usa
   piu' nessuna di quelle classi: 33 regole su 36 erano diventate orfane.
   Tolte invece che lasciate a invecchiare.
   ========================================================================= */

/* =========================================================================
   124. I MATTONI DELLE PAGINE MORBIDE (dalla /faq, con nomi neutri)
   -------------------------------------------------------------------------
   /faq e' la pagina piu' riuscita del sito: schede bianche con angoli a 18px,
   un filo appena visibile, un'ombra lunga e bassa, riquadri d'icona pieni di
   marca o tinti di rosa, righe con la pastiglia del conteggio, e un blocco
   rosso per l'azione che conta.

   Erano tutti vestiti con nomi che parlano di quella pagina (`faq-login-card`,
   `faq-redesign-category-icon`, …). Qui gli stessi valori — misurati sulla
   pagina viva, non inventati — prendono nomi che non parlano di nessuna
   pagina, cosi' la prossima area puo' usarli invece di ricopiarli.
   ========================================================================= */
html body.nedate-ui-standard .sw-panel {
  padding: 28px !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .035) !important;
}
html body.nedate-ui-standard .sw-panel--tight { padding: 20px !important; }

/* riquadro d'icona tinto (le righe), accanto a quello pieno della 115 */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .sw-card-icon--soft {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: var(--sw-brand-100) !important;
  color: var(--sw-brand-700) !important;
  -webkit-text-fill-color: var(--sw-brand-700) !important;
}

/* la riga: icona, testo, pastiglia, freccia */
html body.nedate-ui-standard .sw-rowcard {
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  width: 100% !important;
  padding: .6rem .7rem !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .03)) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease !important;
}
html body.nedate-ui-standard .sw-rowcard:hover,
html body.nedate-ui-standard .sw-rowcard.is-active {
  background: var(--sw-brand-50, #fff2f2) !important;
  border-color: rgba(217, 35, 54, .32) !important;
}
html body.nedate-ui-standard .sw-rowcard__copy {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body.nedate-ui-standard .sw-rowcard__copy > strong {
  color: var(--sw-ink) !important;
  font-size: .875rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.25 !important;
}
html body.nedate-ui-standard .sw-rowcard__copy > small {
  color: var(--sw-muted) !important;
  font-size: .75rem !important;
}
html body.nedate-ui-standard .sw-pill {
  flex: 0 0 auto !important;
  padding: .2rem .55rem !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  white-space: nowrap !important;
}

/* il blocco rosso dell'azione principale */
html body.nedate-ui-standard .sw-cta {
  display: flex !important;
  align-items: center !important;
  gap: .8rem !important;
  width: 100% !important;
  padding: 14px 16px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--sw-brand-600) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 28px rgba(255, 60, 28, .18) !important;
  text-decoration: none !important;
  /* `sw-cta` nasce come `<a>`. Quando e' un `<button>` — il «Stampa» delle
     etichette — il browser gli da' `text-align: center` di suo, e le due
     righe di testo finivano in mezzo mentre su ogni altra pagina stanno a
     sinistra. Lo diciamo qui, una volta. */
  text-align: left !important;
}
html body.nedate-ui-standard .sw-cta__icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .16) !important;
  font-size: 1.05rem !important;
}
html body.nedate-ui-standard .sw-cta__copy { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
html body.nedate-ui-standard .sw-cta__copy > small { font-size: .72rem !important; opacity: .86 !important; }
html body.nedate-ui-standard .sw-cta__copy > strong { font-size: .95rem !important; font-weight: var(--sw-weight-bold, 700) !important; }
html body.nedate-ui-standard .sw-cta__go {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .18) !important;
}

/* il numero con l'icona */
html body.nedate-ui-standard .sw-metric {
  display: flex !important;
  flex-direction: column !important;
  gap: .35rem !important;
}
html body.nedate-ui-standard .sw-metric__value {
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display, "Archivo") !important;
  font-size: 1.85rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1 !important;
}
html body.nedate-ui-standard .sw-metric__label {
  color: var(--sw-muted) !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
}

/* la scheda piccola sotto il titolo */
html body.nedate-ui-standard .sw-feature {
  display: flex !important;
  flex-direction: column !important;
  gap: .45rem !important;
  height: 100% !important;
  padding: 12px !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 13px 34px rgba(16, 33, 62, .043) !important;
}
html body.nedate-ui-standard .sw-feature__title {
  color: var(--sw-ink) !important;
  font-size: .8rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
}
html body.nedate-ui-standard .sw-feature__text {
  color: var(--sw-muted) !important;
  font-size: .75rem !important;
  line-height: 1.35 !important;
}

/* --- il titolo grande delle pagine, con la seconda riga di marca --------- */
html body.nedate-ui-standard .sw-hero-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  padding: .35rem .7rem !important;
  /* La pastiglia a volte e' anche il ritorno indietro — sulla scheda di un
     corriere porta all'elenco — e da `<a>` si portava dietro la sottolineatura
     dei collegamenti, che nessun'altra pastiglia del sito ha. */
  text-decoration: none !important;
  color: var(--sw-brand-700) !important;
  background: var(--sw-brand-50, #fff2f2) !important;
  border: 1px solid var(--sw-brand-100) !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}
html body.nedate-ui-standard .sw-hero-title {
  margin: .9rem 0 .6rem !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display, "Archivo") !important;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem) !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
}
html body.nedate-ui-standard .sw-hero-title > span { color: var(--sw-brand-600) !important; }
html body.nedate-ui-standard .sw-hero-lead {
  max-width: 34rem !important;
  margin: 0 !important;
  color: var(--sw-muted) !important;
  font-size: .95rem !important;
  line-height: 1.6 !important;
}

/* Shared first hero row.
   Bootstrap rows compensate their vertical gutter with a negative top margin.
   Some pages place hidden configuration nodes before the hero and older
   normalizers can lose that compensation. This class makes the page-header
   rhythm explicit and identical on desktop/tablet/mobile. */
html body.nedate-ui-standard .sw-page-hero-row {
  margin-top: calc(-1 * var(--bs-gutter-y, 1.5rem)) !important;
}

/* --- testata di un pannello: icona, titolo, riga di servizio, azione ----- */
html body.nedate-ui-standard .sw-panel__head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  margin-bottom: 1.15rem !important;
}
html body.nedate-ui-standard .sw-panel__title {
  margin: 0 !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-display, "Archivo") !important;
  font-size: 1.15rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.2 !important;
}
html body.nedate-ui-standard :is(.sw-panel__sub, .sw-panel__subtitle) {
  margin: .2rem 0 0 !important;
  color: var(--sw-muted) !important;
  font-size: .82rem !important;
  /* Il peso va detto: dentro un `<button>` — la testa del pannello dei filtri,
     che sul telefono e' l'interruttore che lo apre — la riga di servizio
     ereditava il 600 del bottone, e lo stesso mattone si vedeva in due pesi
     diversi nella stessa pagina. La variante `__subtitle` qui sotto se lo
     rialza a 500, come prima. */
  font-weight: var(--sw-weight-normal, 400) !important;
  line-height: 1.4 !important;
}

html body.nedate-ui-standard .sw-panel__subtitle {
  font-weight: var(--sw-weight-medium, 500) !important;
}
html body.nedate-ui-standard .sw-panel__action {
  flex: 0 0 auto !important;
  padding: .38rem .7rem !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .04)) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 999px !important;
  font-size: .75rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard .sw-panel__action:hover { border-color: var(--sw-line-strong) !important; }

/* --- pastiglie di stato ------------------------------------------------- */
html body.nedate-ui-standard .sw-state {
  display: inline-flex !important;
  align-items: center !important;
  padding: .18rem .5rem !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .03em !important;
}
html body.nedate-ui-standard .sw-state--ok   { color: var(--sw-success) !important; background: var(--sw-success-bg) !important; }
html body.nedate-ui-standard .sw-state--go   { color: var(--sw-info) !important;    background: var(--sw-info-bg) !important; }
html body.nedate-ui-standard .sw-state--stop { color: var(--sw-danger) !important;  background: var(--sw-danger-soft, rgba(200,30,50,.12)) !important; }

/* --- lo stato vuoto di un pannello -------------------------------------- */
html body.nedate-ui-standard .sw-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .3rem !important;
  padding: 2.4rem 1rem !important;
  text-align: center !important;
}
html body.nedate-ui-standard .sw-empty > i { color: var(--sw-line-strong) !important; font-size: 1.7rem !important; }
html body.nedate-ui-standard .sw-empty > strong { color: var(--sw-ink) !important; font-size: .92rem !important; }
html body.nedate-ui-standard .sw-empty > span { max-width: 18rem !important; color: var(--sw-muted) !important; font-size: .82rem !important; }

/* --- riga di misura (etichetta a sinistra, valore a destra) ------------- */
html body.nedate-ui-standard .sw-kv {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: .6rem 0 !important;
  border-bottom: 1px solid var(--sw-line) !important;
  color: var(--sw-muted) !important;
  font-size: .85rem !important;
}
html body.nedate-ui-standard .sw-kv:last-of-type { border-bottom: 0 !important; }
html body.nedate-ui-standard .sw-kv > strong { color: var(--sw-ink) !important; font-weight: var(--sw-weight-semi, 600) !important; }
html body.nedate-ui-standard .sw-meter {
  /* Senza `display` il mattone funziona solo su un `div`: messo su uno `<span>`
     resta inline, e altezza e larghezza non si applicano — la barra sparisce
     senza dire niente. Un blocco in flusso normale prende da solo tutta la
     larghezza disponibile, quindi non serve forzare `width`. */
  display: block !important;
  height: 8px !important;
  margin-top: .3rem !important;
  background: var(--sw-line) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
html body.nedate-ui-standard .sw-meter > span {
  display: block !important;
  height: 100% !important;
  background: var(--sw-success) !important;
  border-radius: 999px !important;
}

/* --- la dashboard: solo l'impaginazione, il resto sono i mattoni comuni --- */
html body.nedate-ui-standard .user-dashboard-page .dashboard-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .5rem !important;
}
html body.nedate-ui-standard .user-dashboard-page :is(.dashboard-shipments, .dashboard-setup) {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
}
html body.nedate-ui-standard .user-dashboard-page .dashboard-mark {
  font-size: .72rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: .04em !important;
}
html body.nedate-ui-standard .user-dashboard-page .sw-feature .sw-metric__label small {
  display: block !important;
  font-size: .68rem !important;
}
@media (max-width: 575.98px) {
  html body.nedate-ui-standard .user-dashboard-page .dashboard-actions { grid-template-columns: 1fr !important; }
  html body.nedate-ui-standard .sw-panel { padding: 18px !important; border-radius: 14px !important; }
}

/* =========================================================================
   125. IL RESPIRO IN CIMA ALLE PAGINE DELL'AREA UTENTE, SUL TELEFONO
   -------------------------------------------------------------------------
   Il telaio delle pagine applicative parte a 7rem dall'alto — 112px — su
   qualunque schermo. Sul telefono la navbar ne misura 62: restavano **76px
   di vuoto** prima della prima parola, su uno schermo alto 844. La /faq, che
   e' il riferimento, ne lascia 16.

   Qui il rientro in cima diventa una somma: l'altezza vera della navbar piu'
   uno stacco. Su schermi grandi resta com'era.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] main > :is(.nedate-main-container, .user-logistics-page, .user-dashboard-page, .dashboard-wrapper) {
    padding-top: calc(var(--sw-nav-height, 56px) + 1rem) !important;
  }

  /* La prima riga della griglia porta con se' la grondaia verticale di
     Bootstrap: la riga ha margine negativo e **le colonne** un margine di
     1,5rem in cima. Sulla prima riga quel margine si somma al rientro del
     telaio e fa altri 24px di vuoto sopra la prima parola. */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .user-dashboard-page > .row:first-of-type {
    margin-top: 0 !important;
  }
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .user-dashboard-page > .row:first-of-type > [class*="col-"]:first-child {
    margin-top: 0 !important;
  }

  /* l'occhiello: stessa misura di quello della /faq (24px d'altezza) */
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .sw-hero-kicker {
    padding: .28rem .6rem !important;
    font-size: .62rem !important;
  }
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .sw-hero-title {
    margin-top: .7rem !important;
  }
}

/* =========================================================================
   127. ICONE QUIETE: IL ROSA ESCE DALLA DASHBOARD
   -------------------------------------------------------------------------
   Il riquadro rosa della /faq funziona li', dove le icone sono poche e fanno
   da titolo a una categoria. In una dashboard ce ne sono venti: venti
   macchie rosa diventano un motivo a pois, e il rosso non vuol dire piu'
   niente — proprio dove dovrebbe dire «questa e' l'azione».

   Qui il riquadro diventa quieto: fondo di superficie, filo appena visibile,
   glifo dell'inchiostro secondario. Il pieno di marca resta a due cose sole:
   la testata delle azioni e il blocco rosso.
   ========================================================================= */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .sw-card-icon--quiet {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .04)) !important;
  border: 1px solid var(--sw-line) !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  font-size: 1.05rem !important;
}

/* Variante condivisa: al posto del glifo mostra il marchio del corriere,
   mantenendo esattamente il box 40x40 di sw-card-icon--quiet. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .sw-card-icon--logo {
  padding: .3rem !important;
  overflow: hidden !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .sw-card-icon--logo > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
/* al passaggio la riga si accende: il glifo prende l'inchiostro pieno */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .sw-rowcard:hover .sw-card-icon--quiet {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  border-color: var(--sw-line-strong) !important;
}
/* nelle schede dei numeri il riquadro e' piu' piccolo: li' conta la cifra */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .sw-feature .sw-card-icon--quiet {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: .95rem !important;
}

/* --- due mattoni che mancavano: il pulsante-icona e l'etichettina --------- */
html body.nedate-ui-standard .sw-iconbtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  color: var(--sw-muted) !important;
  background: transparent !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px !important;
  font-size: .85rem !important;
  transition: color .16s ease, background .16s ease, border-color .16s ease !important;
}
html body.nedate-ui-standard .sw-iconbtn:hover {
  color: var(--sw-ink) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .05)) !important;
  border-color: var(--sw-line-strong) !important;
}
html body.nedate-ui-standard .sw-iconbtn--danger:hover {
  color: var(--sw-danger) !important;
  background: var(--sw-danger-soft, rgba(200, 30, 50, .1)) !important;
  border-color: var(--sw-danger) !important;
}

/* Common page-level actions. On phones they collapse to icon-only controls
   anchored in the top-right of the page heading; desktop keeps full labels. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-page-heading {
    position: relative !important;
  }
  html body.nedate-ui-standard .sw-page-heading__content {
    padding-right: 108px !important;
  }
  html body.nedate-ui-standard .sw-page-actions {
    position: absolute !important;
    top: 28px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    z-index: 4 !important;
  }
  html body.nedate-ui-standard .sw-page-action {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }
  /* Misura e angoli del quadratino: la regola comune dei bottoni pesa piu'
     di `.sw-page-action`, quindi un `.btn` restava alto 48px e a spigoli vivi
     accanto a una carta rossa alta 44 e arrotondata. Qui si pareggiano. */
  html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class][class] .sw-page-action {
    min-height: 44px !important;
    height: 44px !important;
    padding-inline: 0 !important;
    border-radius: 12px !important;
  }
  html body.nedate-ui-standard .sw-page-action__label {
    display: none !important;
  }
  html body.nedate-ui-standard .sw-page-action > i {
    margin: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }
  html body.nedate-ui-standard .sw-page-action--menu.dropdown-toggle::after {
    display: none !important;
  }

  /* La carta rossa dell'azione principale (`sw-cta`) quando fa anche da
     azione di pagina: sul telefono si richiude nel quadratino in alto a
     destra come ogni altro comando, e resta solo la sua icona. Cosi' la
     testata larga del portafoglio e la regola comune del telefono possono
     stare sulla stessa pagina senza litigare. */
  html body.nedate-ui-standard .sw-cta.sw-page-action {
    gap: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  html body.nedate-ui-standard .sw-cta.sw-page-action > .sw-cta__icon {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border-radius: inherit !important;
    font-size: 1.05rem !important;
  }
  html body.nedate-ui-standard .sw-cta.sw-page-action > :is(.sw-cta__copy, .sw-cta__go) {
    display: none !important;
  }
}

/* Common stacked full-width actions on phones. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-mobile-full-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  html body.nedate-ui-standard .sw-mobile-full-action {
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
  }
}

/* Card action menu: on mobile the common pattern is a borderless kebab
   anchored to the card's top-right corner. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-card-has-menu {
    position: relative !important;
  }
  html body.nedate-ui-standard .sw-card-menu {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 3 !important;
  }

  /* Reserve space for the top-right card action so title/subtitle never run underneath it. */
  html body.nedate-ui-standard .sw-card-has-menu > .d-flex:first-child,
  html body.nedate-ui-standard .sw-card-has-menu > .sw-panel__head:first-child {
    padding-right: 64px !important;
  }
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class] .sw-card-menu > .sw-iconbtn,
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class] .sw-card-menu > .sw-iconbtn:hover,
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class] .sw-card-menu > .sw-iconbtn:focus,
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class] .sw-card-menu > .sw-iconbtn:focus-visible,
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class] .sw-card-menu > .sw-iconbtn:active,
  html:not(#_):not(#__):not(#___) body.nedate-ui-standard[class][class][class] .sw-card-menu > .sw-iconbtn.show {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
}
html body.nedate-ui-standard .sw-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: .15rem .45rem !important;
  color: var(--sw-muted) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .05)) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 6px !important;
  font-size: .62rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
/* il prezzo in colonna, come nel pannello del carrello in navbar */
html body.nedate-ui-standard .sw-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  flex: 0 0 auto !important;
  text-align: right !important;
}
html body.nedate-ui-standard .sw-price > strong {
  color: var(--sw-ink) !important;
  font-size: .95rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  white-space: nowrap !important;
}
html body.nedate-ui-standard .sw-price > small { color: var(--sw-muted) !important; font-size: .68rem !important; }

/* il totale grande in fondo a un riepilogo */
html body.nedate-ui-standard .sw-total {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-top: .7rem !important;
  padding-top: .7rem !important;
  border-top: 1px solid var(--sw-line) !important;
  color: var(--sw-ink) !important;
  font-size: .95rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard .sw-total strong {
  font-family: var(--sw-font-display, "Archivo") !important;
  font-size: 1.4rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1 !important;
}

/* --- il carrello: solo impaginazione ------------------------------------ */
html body.nedate-ui-standard .cart-page .cart-items {
  display: flex !important;
  flex-direction: column !important;
  gap: .55rem !important;
}
html body.nedate-ui-standard .cart-page .cart-item { align-items: flex-start !important; }
html body.nedate-ui-standard .cart-page .cart-item .sw-card-icon--quiet { margin-top: .1rem !important; }
html body.nedate-ui-standard .cart-page .cart-item-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .1rem .9rem !important;
  margin-top: .15rem !important;
}
html body.nedate-ui-standard .cart-page .cart-summary-panel {
  position: sticky !important;
  top: calc(var(--sw-nav-height, 56px) + 1rem) !important;
}
@media (max-width: 1199.98px) {
  html body.nedate-ui-standard .cart-page .cart-summary-panel { position: static !important; }
}
@media (max-width: 575.98px) {
  /* Sul telefono la riga non sta su una linea sola: invece di mandare a capo
     i pezzi uno per volta — con l'icona che restava da sola in cima — diventa
     una griglia: icona e testo sopra, prezzo e cestino sotto. */
  html body.nedate-ui-standard .cart-page .cart-item {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "icona testo testo" ". prezzo bottone" !important;
    align-items: start !important;
    gap: .5rem .7rem !important;
  }
  html body.nedate-ui-standard .cart-page .cart-item > .sw-card-icon { grid-area: icona !important; }
  html body.nedate-ui-standard .cart-page .cart-item > .sw-rowcard__copy { grid-area: testo !important; }
  html body.nedate-ui-standard .cart-page .cart-item > .sw-price {
    grid-area: prezzo !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  html body.nedate-ui-standard .cart-page .cart-item > form { grid-area: bottone !important; }
}

/* --- pannello a filo: la tabella arriva ai bordi, la testata resta rientrata */
html body.nedate-ui-standard .sw-panel--flush { padding: 0 !important; }
html body.nedate-ui-standard .sw-panel--flush > .sw-panel__head { padding: 20px 22px 0 !important; margin-bottom: .9rem !important; }
html body.nedate-ui-standard .sw-panel > .sw-panel__body { padding: 0 !important; }

/* =========================================================================
   129. L'ELENCO DELLE SPEDIZIONI (/user/shipments)
   -------------------------------------------------------------------------
   La pagina ha milleduecento righe di Blade e un quinto e' comportamento:
   filtri, azioni di riga, finestre. Riscriverla per intero sarebbe stato un
   rischio senza guadagno; quello che cambia e' il **vestito**: testata,
   pannelli, tabella, pastiglie, impaginazione. Il markup delle righe resta
   dov'e', con le sue azioni.

   La tabella non diventa una lista di righe come sul carrello: qui le colonne
   servono davvero — mittente e destinatario si leggono in verticale, e con
   cinquanta spedizioni l'occhio scorre le colonne. Prende pero' la stessa
   voce del resto: intestazione in maiuscoletto, righe separate da un filo,
   nessuna zebratura, e il rilievo solo al passaggio.
   ========================================================================= */
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) :is(.nedate-data-table, .table) {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) :is(.table-head-custom, thead) th {
  padding: .7rem 1rem !important;
  color: var(--sw-muted) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .03)) !important;
  border-bottom: 1px solid var(--sw-line) !important;
  border-top: 1px solid var(--sw-line) !important;
  font-size: .66rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) tbody td {
  padding: .85rem 1rem !important;
  background: transparent !important;
  border-bottom: 1px solid var(--sw-line) !important;
  color: var(--sw-ink) !important;
  font-size: .85rem !important;
  vertical-align: middle !important;
}
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) tbody tr:last-child td { border-bottom: 0 !important; }
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) tbody tr:hover td {
  background: var(--sw-surface-2, rgba(15, 23, 42, .025)) !important;
}
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) tbody td small,
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) tbody td .text-muted {
  color: var(--sw-muted) !important;
  font-size: .75rem !important;
}



/* il pulsante che apre i filtri sul telefono */
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) :is(.shipments-filters-toggle, .imports-filters-toggle, .address-book-filters-toggle) {
  min-height: 46px !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 12px !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}

/* l'impaginazione: pastiglie, come il resto */
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) :is(.shipments-pagination, .imports-pagination, .address-book-pagination) :is(.page-link, .page-item > span) {
  min-width: 36px !important;
  padding: .35rem .6rem !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px !important;
  font-size: .8rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) :is(.shipments-pagination, .imports-pagination, .address-book-pagination) .page-item.active .page-link {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard :is(.user-shipments-page, .user-imports-page, .user-address-book-page, .sw-listing) :is(.shipments-pagination, .imports-pagination, .address-book-pagination) .page-item.disabled :is(.page-link, span) {
  color: var(--sw-line-strong) !important;
  background: transparent !important;
}

/* Le pastiglie "subtle" di Bootstrap non sanno del tema: in scuro perdono il
   fondo e restano due parole in mezzo al nulla. Qui leggono i token di stato,
   che il tema ribalta da solo. Limitate alle pastiglie: gli stessi nomi, su
   una superficie grande, vogliono dire un'altra cosa. */
html body.nedate-ui-standard .badge.bg-success-subtle { background: var(--sw-success-bg) !important; color: var(--sw-success) !important; -webkit-text-fill-color: var(--sw-success) !important; }
html body.nedate-ui-standard .badge.bg-primary-subtle { background: var(--sw-info-bg) !important;    color: var(--sw-info) !important;    -webkit-text-fill-color: var(--sw-info) !important; }
html body.nedate-ui-standard .badge.bg-danger-subtle  { background: var(--sw-danger-soft, rgba(200,30,50,.12)) !important; color: var(--sw-danger) !important; -webkit-text-fill-color: var(--sw-danger) !important; }
html body.nedate-ui-standard .badge.bg-warning-subtle { background: var(--sw-warning-bg) !important; color: var(--sw-warning) !important; -webkit-text-fill-color: var(--sw-warning) !important; }
html body.nedate-ui-standard .badge.bg-info-subtle    { background: var(--sw-info-bg) !important;    color: var(--sw-info) !important;    -webkit-text-fill-color: var(--sw-info) !important; }

/* In tema scuro il fondo di stato e' quasi il colore del pannello: la
   pastiglia perdeva la forma e restavano due parole colorate. Un filo del
   proprio colore gliela ridà, in tutti e due i temi. */
html body.nedate-ui-standard .badge:is(.bg-success-subtle, .bg-primary-subtle, .bg-danger-subtle, .bg-warning-subtle, .bg-info-subtle) {
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent) !important;
}


/* =========================================================================
   130. GLI ORDINI IMPORTATI (/user/imports)
   -------------------------------------------------------------------------
   Stessa storia dell'elenco spedizioni: la pagina e' quasi tutta
   comportamento — filtri, tendine corriere, date di ritiro, azioni di riga —
   e a cambiare e' solo il vestito. Qui pero' il vestito vecchio se n'e'
   andato per davvero: le regole che truccavano *questa* pagina (fondi bianchi
   fissi, cornici a 14px, pulsanti squadrati, un'intera tavolozza `--imports-*`)
   stavano in tre fogli diversi e vincevano per specificita' sul livello
   condiviso — in tema scuro il pannello dei filtri restava una lastra bianca.
   Sono state tolte: centododici regole che parlavano solo di questa pagina.
   Da qui in avanti la veste e' quella di tutti, e cambia in un posto solo.

   Restano tre mattoni nuovi, che servono anche altrove:
   la riga d'elenco del telefono, la freccia dei filtri e il pulsante-icona
   quadrato della barra filtri.
   ========================================================================= */

/* --- la riga dell'elenco sul telefono ------------------------------------
   Sul telefono la tabella non ci sta e ogni ordine diventa un blocco. Finora
   era una scheda: cornice, angoli, ombra — dentro il pannello, che e' gia'
   una scheda. Due carte una dentro l'altra, e il conto degli spigoli saliva.
   Qui il blocco torna a essere una riga: niente cornice propria, un filo
   sotto a separare, e il respiro lo da' il suo stesso rientro. */
html body.nedate-ui-standard .sw-listrow {
  display: block !important;
  padding: .9rem 1.1rem !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard .sw-listrow:last-of-type { border-bottom: 0 !important; }
html body.nedate-ui-standard .sw-listrow__body { padding: 0 !important; }

/* la riga porta dentro le stesse minuzie della tabella: testo piccolo,
   secondario spento, e i fili interni presi dal tema e non dal grigio di
   Bootstrap, che in scuro sparisce */
html body.nedate-ui-standard .sw-listrow :is(.border-bottom, .border-top) {
  border-color: var(--sw-line) !important;
}
html body.nedate-ui-standard .sw-listrow :is(.text-muted, .text-secondary) {
  color: var(--sw-muted) !important;
}

/* la testata dell'elenco sul telefono ("seleziona tutto" + conteggio) sta
   sulla stessa colonna delle righe */
html body.nedate-ui-standard .sw-panel--flush > .d-lg-none > .d-flex:first-child {
  padding: .9rem 1.1rem .6rem !important;
  margin: 0 !important;
}

/* --- la barra dei filtri ------------------------------------------------- */
/* la freccia che gira quando il pannello si apre */
html body.nedate-ui-standard :is(.imports-filters-chevron, .shipments-filters-chevron, .address-book-filters-chevron) {
  transition: transform .2s ease !important;
}
html body.nedate-ui-standard :is(.imports-filters-toggle, .shipments-filters-toggle, .address-book-filters-toggle)[aria-expanded="true"] :is(.imports-filters-chevron, .shipments-filters-chevron, .address-book-filters-chevron) {
  transform: rotate(180deg) !important;
}

/* i due pulsanti in fondo alla barra: sul desktop sono quadrati e stanno
   all'altezza dei campi; sul telefono si allargano e prendono l'etichetta */
@media (min-width: 960px) {
  html body.nedate-ui-standard :is(.imports-filter-actions, .shipments-filter-actions, .address-book-filter-actions) :is(.imports-filter-icon-btn, .shipments-filter-icon-btn, .address-book-filter-icon-btn) {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }
  html body.nedate-ui-standard :is(.imports-filter-actions, .shipments-filter-actions, .address-book-filter-actions) :is(.imports-filter-icon-btn, .shipments-filter-icon-btn, .address-book-filter-icon-btn) i {
    font-size: 1.05rem !important;
  }
}

/* --- il piede dell'elenco ------------------------------------------------ */
/* l'impaginazione dell'elenco importati vive dentro il pannello a filo: il
   filo che la stacca dalle righe e' quello del tema, non il grigio di
   Bootstrap */
html body.nedate-ui-standard :is(.imports-pagination-wrap, .shipments-pagination-wrap, .address-book-pagination-wrap) {
  border-color: var(--sw-line) !important;
}
/* Quel piede porta da sempre 4.5rem di respiro sotto: serve quando sta in
   fondo alla pagina, come sulle spedizioni. Qui vive *dentro* il pannello, e
   quel respiro diventava un vuoto bianco sotto l'ultima riga. Dentro un
   pannello il respiro lo da' il pannello. */
html body.nedate-ui-standard .sw-panel :is(.imports-pagination-wrap, .shipments-pagination-wrap, .address-book-pagination-wrap) {
  margin-bottom: 0 !important;
}


/* =========================================================================
   132. IL PORTAFOGLIO (/user/wallet)
   -------------------------------------------------------------------------
   La pagina aveva tre vestiti sovrapposti: uno «estratto dalla blade», uno
   «allineato al mockup» e uno per il tema scuro, tutti appesi a `.wallet-page`
   — che pero' la porta anche `/user/wallet/recharge`. Cancellarli avrebbe
   spogliato la ricarica, che non e' in questo giro.

   Quindi qui non si e' tagliato niente: e' l'elenco che **esce** dal
   guardaroba. Il contenitore lascia `wallet-page` e `wallet-wrapper` (che
   restano alla ricarica) e tiene `user-wallet-page`, che compare solo dentro
   liste condivise. Da li' in poi a vestire la pagina e' il livello comune:
   pannelli, numeri, coppie chiave-valore, tabella, stato vuoto.

   Di nuovo c'e' solo la pastiglia di scelta, che mancava fra i mattoni.
   ========================================================================= */

/* --- la scelta a pastiglia: un radio vestito da pastiglia -----------------
   Il sistema dei campi (§112) veste da se' spunte e pallini, e per chi non ne
   vuole sapere ha gia' una scorciatoia: `.btn-check`, la classe con cui
   Bootstrap fa il «radio travestito da bottone» — la usa gia' la scelta del
   tipo di account in /registrati. Ritagliata dal foglio di Bootstrap, resta
   raggiungibile da tastiera: e' l'etichetta a fare da bottone, e il fuoco si
   vede lo stesso perche' passa al fratello. */
html body.nedate-ui-standard .sw-choice__pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: .55rem !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: .55rem .9rem !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 12px !important;
  font-size: .85rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease !important;
}
html body.nedate-ui-standard .sw-choice__pill:hover {
  border-color: var(--sw-line-strong) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .04)) !important;
}
html body.nedate-ui-standard .btn-check:checked + .sw-choice__pill {
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard .btn-check:focus-visible + .sw-choice__pill {
  outline: 2px solid var(--sw-brand-600) !important;
  outline-offset: 2px !important;
}

/* Un `<code>` dentro la pastiglia e' solo testo. In tema scuro si portava
   dietro un fondo suo — una regola generale tinge ogni `code` di
   `--nd-dark-bg-deep` — e dentro la pastiglia accesa restava un rettangolo
   quasi nero con sopra il testo quasi nero: illeggibile. Misurato sul
   portale degli sviluppatori, dove i nomi degli eventi sono codice. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-choice__pill > code {
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: .78rem !important;
}

/* --- gli estremi del bonifico dentro la riga della tabella ---------------
   E' un cassetto che si apre sotto un movimento: sta dentro il pannello, non
   e' un pannello a sua volta. Prende la superficie tenue e il filo del tema —
   in scuro il grigio di Bootstrap spariva. */
html body.nedate-ui-standard .wallet-bank-details {
  background: var(--sw-surface-2, rgba(15, 23, 42, .025)) !important;
  border-top-color: var(--sw-line) !important;
}
html body.nedate-ui-standard .wallet-bank-details .sw-panel__title {
  font-size: .95rem !important;
}


/* =========================================================================
   133. AFFIDABILITA' E PREMI (/user/trust-score)
   -------------------------------------------------------------------------
   Duecentoquaranta righe, nessuno script, e otto blocchi che erano otto
   componenti nuovi: `trust-stat-card`, `trust-panel`, `trust-card-header`,
   `trust-info-strip`, `trust-rule-box`, `trust-empty-cell`, `trust-list`,
   `trust-alert`. Nessun'altra vista li usava. Sono stati riscritti con i
   mattoni comuni — pannelli, riquadri, righe d'elenco, coppie chiave-valore,
   stati vuoti — e le regole che li vestivano sono state tolte.

   L'ordine dei blocchi cambia di una tacca: i quattro numeri salgono sotto la
   testata, dov'erano sul cruscotto e sul portafoglio. Prima stavano in mezzo,
   dopo due pannelli fitti, e il punteggio — che e' il motivo della pagina —
   si leggeva per terzo.
   ========================================================================= */

/* --- il pannello che avverte ---------------------------------------------
   Serviva un pannello «qualcosa non va»: l'account bloccato qui, ma anche il
   pagamento rifiutato o la spedizione in errore altrove. Non e' un `alert` di
   Bootstrap — quello porta il suo fondo e i suoi angoli e in tema scuro va
   spento a mano: e' il pannello di sempre, con il colore di pericolo sul filo
   e un velo dello stesso colore sul fondo. */
html body.nedate-ui-standard .sw-panel--stop {
  background: color-mix(in srgb, var(--sw-danger) 5%, var(--sw-surface)) !important;
  border-color: color-mix(in srgb, var(--sw-danger) 28%, transparent) !important;
}
html body.nedate-ui-standard .sw-panel--stop .sw-card-icon--quiet {
  color: var(--sw-danger) !important;
  -webkit-text-fill-color: var(--sw-danger) !important;
  background: var(--sw-danger-soft, rgba(200, 30, 50, .1)) !important;
  border-color: color-mix(in srgb, var(--sw-danger) 24%, transparent) !important;
}

/* --- il riquadro-numero quando porta anche una pastiglia di stato ---------
   `sw-feature` era nato per tre parole e un numero. Qui sotto l'etichetta ci
   va anche lo stato del punteggio: la pastiglia e' in linea e senza respiro
   sopra si appoggiava alla parola. */
html body.nedate-ui-standard .sw-feature .sw-state {
  margin-top: .3rem !important;
}

/* --- la pastiglia d'azione, uguale nei due temi ---------------------------
   `.sw-panel__action` e' un collegamento, e in scuro il sito colora tutti i
   collegamenti di rosso con una regola che porta `!important` e una dozzina
   di classi: la stessa pastiglia era inchiostro in chiaro e rossa in scuro.
   Qui vince con gli id — il modo che questo foglio usa da sempre quando deve
   avere ragione — e tocca solo lei: nessun altro collegamento cambia. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-panel__action {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}


/* =========================================================================
   134. LE NOTIFICHE (/notifications)
   -------------------------------------------------------------------------
   Anche qui otto componenti solo suoi — `notifications-kpi-card`,
   `notifications-filter-card`, `notifications-tab`, `notifications-search`,
   `notifications-select`, `notification-row`, `notification-badge`,
   `notification-action-btn` — e nessun'altra vista che li usasse. Riscritti
   con i mattoni comuni; le regole che li vestivano sono cadute.

   Restano quattro aggiunte, tutte generali: la pastiglia di scelta che sa
   stare accesa anche quando e' un collegamento, lo stato «in attesa» che
   mancava alla quaterna, la riga d'elenco con il segno, e l'impaginazione
   che prende un nome proprio invece di quello di una pagina.
   ========================================================================= */

/* --- la pastiglia di scelta come collegamento ----------------------------
   `sw-choice__pill` nasce come etichetta di un radio: acceso lo decide il
   fratello `:checked`. I filtri delle notifiche sono link — la pagina si
   ricarica — e allora l'acceso lo dice una classe. Stesso vestito, due modi
   di arrivarci. */
html body.nedate-ui-standard a.sw-choice__pill {
  text-decoration: none !important;
}
/* Come per `sw-panel__action`: in scuro il sito tinge di rosso ogni
   collegamento, e le pastiglie spente diventavano rosse mentre in chiaro
   erano inchiostro. Stesso rimedio, stesso perimetro: solo loro. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] a.sw-choice__pill:not(.sw-choice__pill--on) {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}
html body.nedate-ui-standard .sw-choice__pill--on,
html body.nedate-ui-standard a.sw-choice__pill--on {
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  background: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
}
/* dentro la pastiglia accesa anche il contatore si gira */
html body.nedate-ui-standard .sw-choice__pill--on .sw-pill {
  color: var(--sw-on-brand) !important;
  -webkit-text-fill-color: var(--sw-on-brand) !important;
  background: rgba(255, 255, 255, .18) !important;
  border-color: transparent !important;
}

/* --- lo stato che mancava -------------------------------------------------
   C'erano «fatto», «in corso» e «fermo»: mancava «in attesa», che e' il
   giallo. Con le notifiche serviva davvero — una gravita' su quattro. */
html body.nedate-ui-standard .sw-state--wait {
  color: var(--sw-warning) !important;
  background: var(--sw-warning-bg) !important;
}

/* --- la riga d'elenco con il segno ---------------------------------------
   Una notifica non letta, un ordine da controllare: la riga va distinta
   senza gridare. Un filo di colore a sinistra e un velo sul fondo; il testo
   resta quello di tutte le altre. */
html body.nedate-ui-standard .sw-listrow--flag {
  position: relative !important;
  background: color-mix(in srgb, var(--sw-brand-600) 4%, transparent) !important;
}
html body.nedate-ui-standard .sw-listrow--flag::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--sw-brand-600) !important;
}

/* --- l'impaginazione con un nome che non parla di pagine ------------------
   Le pastiglie dell'impaginazione erano scritte tre volte, una per elenco
   (`shipments-`, `imports-`, `address-book-`). `sw-pagination` e' lo stesso
   vestito con un nome che vale per tutti: da qui in avanti si usa questo. */
html body.nedate-ui-standard .sw-pagination :is(.page-link, .page-item > span) {
  min-width: 36px !important;
  padding: .35rem .6rem !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px !important;
  font-size: .8rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard .sw-pagination .pagination {
  gap: .35rem !important;
  margin: 0 !important;
}
html body.nedate-ui-standard .sw-pagination .page-item.active .page-link {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--sw-brand-600) !important;
  border-color: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard .sw-pagination .page-item.disabled :is(.page-link, span) {
  color: var(--sw-line-strong) !important;
  background: transparent !important;
}

/* --- il titolo di una riga non e' il titolo di un pannello ---------------
   `sw-panel__title` vale 1.15rem: giusto sopra una tabella, troppo per una
   riga d'elenco dove i titoli sono dieci uno sotto l'altro. */
html body.nedate-ui-standard .sw-listrow .sw-panel__title {
  font-size: .92rem !important;
}
html body.nedate-ui-standard .sw-listrow .sw-panel__sub {
  margin-top: .35rem !important;
}

/* --- le azioni della riga, sul telefono ----------------------------------
   Sul desktop stanno a destra, in colonna stretta. Sotto i 576px quella
   colonna si riduceva a un pulsante per riga, incolonnati: meglio mandarle a
   capo tutte insieme, sotto il testo, allineate a sinistra come lui. */
@media (max-width: 575.98px) {
  /* la riga deve poter andare a capo: `d-flex` da solo non va a capo, e un
     figlio largo 100% dentro un contenitore che non manda a capo resta li' */
  html body.nedate-ui-standard .sw-listrow__body {
    flex-wrap: wrap !important;
  }
  html body.nedate-ui-standard .sw-listrow__actions {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: .6rem !important;
  }
}

/* Il testo di una riga d'elenco: prende lo spazio che resta e non spinge.
   La base sta a zero, non ad `auto`: con `auto` una frase lunga gonfia il
   blocco e lo manda a capo sotto l'icona invece di stringersi. */
html body.nedate-ui-standard .sw-listrow__main {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}


/* =========================================================================
   138. LE RICHIESTE DI ASSISTENZA (/user/support-tickets)
   -------------------------------------------------------------------------
   Trentasei nomi di classe per una pagina sola: `support-kpi-card`,
   `support-content-grid`, `support-list-toolbar`, `support-ticket-row` e
   compagnia, piu' tre famiglie di pastiglie (`ticket-status-*`,
   `ticket-tag-*`, `ticket-priority-*`) che dicevano quello che `sw-state` e
   `sw-tag` dicono gia' per tutto il sito. Riscritta con i mattoni comuni;
   novantasette regole tolte da `nedate-design-system.css`.

   Di nuovo c'e' un solo pezzo, e serviva da tempo: il campo di scelta dentro
   una barra di filtri.
   ========================================================================= */

/* --- il campo di scelta in una barra di filtri ---------------------------
   In una riga flessibile un `form-floating` con dentro un `select` si lascia
   stringere fino a tagliare la voce scelta: «Tutte le categorie» diventava
   «Tutte le» con la freccia sopra l'ultima lettera. Qui smette di cedere e
   tiene la sua misura; sul telefono, dove la riga va a capo, si prende tutta
   la larghezza invece di restare una colonnina. */
html body.nedate-ui-standard .sw-filter-select {
  flex: 0 0 auto !important;
  min-width: 14.5rem !important;
}
/* Il campo di ricerca, invece, deve cedere: e' lui a fare da molla nella
   barra. Con `flex-grow-1` di Bootstrap la base resta `auto` e il campo non
   si stringe, cosi' a spingere erano le pastiglie, che finivano a capo. */
html body.nedate-ui-standard .sw-filter-search {
  flex: 1 1 10rem !important;
  min-width: 0 !important;
}
@media (max-width: 575.98px) {
  html body.nedate-ui-standard .sw-filter-select {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* =========================================================================
   140. IL MAGAZZINO (/user/logistics)
   -------------------------------------------------------------------------
   Terza pagina con il foglio di stile dentro la Blade — novanta righe in un
   `@push('styles')`, come i movimenti del portafoglio (§135). Via anche
   questo: la pagina prende i pannelli, i numeri e le tabelle di tutti.

   La barra della sezione — dieci voci, dalla panoramica alle etichette — sta
   in un pezzo incluso da **quattordici viste**: cambiarla li' significa
   cambiarla per tutto il magazzino.
   ========================================================================= */

/* --- una fila di pastiglie che scorre di lato ----------------------------
   Dieci voci non stanno su uno schermo stretto. Prima erano dentro un
   `logistics-tabs`: una scatola bianca squadrata, con la sua cornice e la sua
   ombra, dentro una pagina di pannelli arrotondati — l'unico spigolo rimasto.
   Adesso le pastiglie stanno per conto loro e, quando non ci stanno, la fila
   scorre di lato invece di andare a capo: cosi' la barra resta alta una riga
   e non spinge giu' la pagina. Serve a qualunque fila di pastiglie, non solo
   a questa. */
html body.nedate-ui-standard .sw-pillbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: .5rem !important;
  overflow-x: auto !important;
  padding-bottom: .3rem !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}
html body.nedate-ui-standard .sw-pillbar > * {
  flex: 0 0 auto !important;
}

/* =========================================================================
   148. IL FRANCOBOLLO DEL LOGO — `sw-logo`
   -------------------------------------------------------------------------
   I contratti corriere mostravano il logo con `courier-logo`, vestito tre
   volte in tre fogli diversi (28px, 46px, 100% dentro `.icon-square`) e
   incorniciato da una regola scritta nella pagina. Qui il riquadro diventa
   un mattone: misura fissa, cornice e fondo dai gettoni del tema, immagine
   che ci sta dentro senza deformarsi. Serve ovunque ci sia un marchio in
   riga — corrieri, marketplace, integrazioni.
   ========================================================================= */
html body.nedate-ui-standard .sw-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  padding: .25rem !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
html body.nedate-ui-standard .sw-logo--lg {
  width: 46px !important;
  height: 46px !important;
}
/* La misura da testata: il marchio del fornitore accanto al titolo. */
html body.nedate-ui-standard .sw-logo--xl {
  width: 72px !important;
  height: 72px !important;
  padding: .6rem !important;
  border-radius: 14px !important;
}
html body.nedate-ui-standard .sw-logo > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Badge comune per corrieri e marketplace marcati come Beta.
   Si appoggia al logo senza cambiare la sua misura. */
html body.nedate-ui-standard .sw-beta-logo {
  position: relative !important;
  overflow: visible !important;
}
/* Alcuni contenitori logo (sw-thumb, sw-card-icon, carrier-logo-box) hanno
   overflow:hidden definito piu' avanti: la doppia classe mantiene visibile
   il badge fuori dall'angolo senza toccare gli altri loghi. */
html body.nedate-ui-standard .sw-beta-logo.sw-thumb,
html body.nedate-ui-standard .sw-beta-logo.sw-logo,
html body.nedate-ui-standard .sw-beta-logo.sw-card-icon,
html body.nedate-ui-standard .sw-beta-logo.carrier-logo-box,
html body.nedate-ui-standard .sw-beta-logo.mobile-summary-logo {
  overflow: visible !important;
}
html body.nedate-ui-standard .sw-beta-badge.d-none {
  display: none !important;
}
html body.nedate-ui-standard .sw-beta-badge {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 17px !important;
  padding: 2px 5px !important;
  border: 2px solid var(--sw-surface) !important;
  border-radius: var(--sw-radius-pill) !important;
  background: var(--sw-info) !important;
  color: var(--sw-on-info) !important;
  -webkit-text-fill-color: var(--sw-on-info) !important;
  box-shadow: var(--sw-shadow-xs) !important;
  font-family: var(--sw-font-body) !important;
  font-size: 8px !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* =========================================================================
   149. IL SELETTORE CON LA RICERCA — `sw-picker`
   -------------------------------------------------------------------------
   La scelta del corriere non e' una `<select>`: e' un finto campo che apre un
   pannello con la ricerca e le voci raggruppate per area. Il vestito stava
   scritto nella pagina, in trenta regole con i colori a mano e nessuna
   risposta al tema scuro. Qui diventa un mattone: stesso profilo dei campi
   `form-floating` del resto del sito (58px, etichetta piccola in alto,
   valore sotto), colori dai gettoni, pannello che scorre.
   Serve ovunque ci sia da scegliere da una lista lunga: corrieri,
   marketplace, paesi.
   ========================================================================= */
html body.nedate-ui-standard .sw-picker {
  position: relative !important;
  display: block !important;
}
/* Le misure non sono inventate: sono quelle che il browser calcola su un
   `form-select-modern` accanto — 58px di altezza, 26/16/8 di riempimento,
   e gli stessi gettoni per bordo, raggio e corpo del testo. */
html body.nedate-ui-standard .sw-picker__trigger {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 26px 35px 8px 16px !important;
  color: var(--sw-ink) !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-field-border, var(--sw-line)) !important;
  border-radius: var(--sw-field-radius, 5px) !important;
  font-size: var(--sw-control-fs, 15px) !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
}
html body.nedate-ui-standard .sw-picker__trigger:hover {
  border-color: var(--sw-line-strong) !important;
}
html body.nedate-ui-standard .sw-picker__trigger:focus,
html body.nedate-ui-standard .sw-picker__trigger:focus-visible {
  outline: 0 !important;
  border-color: var(--sw-ink) !important;
  box-shadow: 0 0 0 .2rem var(--sw-surface-2, rgba(15, 23, 42, .12)) !important;
}
html body.nedate-ui-standard .sw-picker__trigger.is-invalid {
  border-color: var(--sw-danger, #dc3545) !important;
}
html body.nedate-ui-standard .sw-picker__label {
  position: absolute !important;
  /* -1px: dentro un riquadro col bordo il blocco di riferimento parte dopo il
     bordo, e l'etichetta scivolerebbe di un pixel sotto quella dei campi veri. */
  top: -1px !important;
  left: 0 !important;
  padding: 9px 16px 0 17px !important;
  color: var(--sw-ink-label, #617087) !important;
  font-size: 11px !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .44px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
html body.nedate-ui-standard .sw-picker__value {
  color: var(--sw-ink) !important;
  font-size: var(--sw-control-fs, 15px) !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html body.nedate-ui-standard .sw-picker__caret {
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--sw-muted) !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
html body.nedate-ui-standard .sw-picker__menu {
  position: absolute !important;
  z-index: 1200 !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  padding: .35rem !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .16) !important;
}
html body.nedate-ui-standard .sw-picker__search {
  padding: .15rem .15rem .45rem !important;
}
html body.nedate-ui-standard .sw-picker__group-label {
  padding: .5rem .65rem .25rem !important;
  color: var(--sw-muted) !important;
  font-size: .68rem !important;
  font-weight: var(--sw-weight-max, 700) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
html body.nedate-ui-standard .sw-picker__item {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .5rem .65rem !important;
  color: var(--sw-ink) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
html body.nedate-ui-standard .sw-picker__item:hover,
html body.nedate-ui-standard .sw-picker__item.active {
  background: var(--sw-surface-2, rgba(15, 23, 42, .05)) !important;
}

/* --- il pulsante secondario con la sagoma di quello principale ------------
   `sw-panel__action` e' una pastiglia: sta bene in riga a una tabella, ma in
   fondo a un modulo, accanto al pulsante che salva, sembrava un'altra cosa.
   `sw-btn-quiet` non ridisegna la sagoma — quella la da' `.btn`, che e' la
   stessa del pulsante principale: qui cambiano solo i colori, quelli quieti
   del `sw-panel__action`. Si usa come `class="btn sw-btn-quiet"`. */
html body.nedate-ui-standard .sw-btn-quiet {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border: 1px solid var(--sw-line) !important;
  box-shadow: none !important;
}
html body.nedate-ui-standard .sw-btn-quiet:hover,
html body.nedate-ui-standard .sw-btn-quiet:focus-visible {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border-color: var(--sw-line-strong) !important;
}
/* In scuro il sito tinge di rosso ogni collegamento, e `-webkit-text-fill-color`
   scende per eredita': serve il livello dell'id per riprendersi il testo. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-btn-quiet {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
}

/* --- la targhetta che porta un codice ------------------------------------
   `sw-tag` mette tutto in maiuscolo: va bene per «orders» o «pdf», non per una
   chiave API, che e' sensibile alle maiuscole e non si legge se la cambi.
   `sw-tag--code` tiene il carattere a spaziatura fissa e il testo com'e'. */
html body.nedate-ui-standard .sw-tag--code {
  font-family: var(--sw-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important;
  font-size: .72rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--sw-ink) !important;
}

/* =========================================================================
   162. IL PANNELLO DELLE NOTIFICHE: IL PULSANTE CHE NON C'ERA
   -------------------------------------------------------------------------
   `.nedate-notification-read-all` era vestito solo in `global.css`, che
   **questa pagina non carica**: sul telefono usciva il pulsante grigio di
   serie del browser, bordo nero da 2px, testo su due righe, largo 155px,
   che nella testata del pannello sembrava un errore.
   Qui prende la forma del `sw-panel__action` — la stessa pastiglia quieta
   che usano tutte le pagine — coi gettoni del tema.
   ========================================================================= */
html body.nedate-ui-standard .nedate-notification-read-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: .38rem .7rem !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  background: var(--sw-surface-2, rgba(15, 23, 42, .05)) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
html body.nedate-ui-standard .nedate-notification-read-all:hover {
  border-color: var(--sw-line-strong) !important;
}
/* Sul telefono lo spazio in testata e' poco: resta l'icona, la frase sparisce. */
@media (max-width: 575.98px) {
  html body.nedate-ui-standard .nedate-notification-read-all {
    width: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
  }
  html body.nedate-ui-standard .nedate-notification-read-all > .bi {
    font-size: .9rem !important;
  }
}

/* --- la fila dei filtri, sul telefono, scorre ----------------------------
   Sei voci non stanno in 390px: la riga scorre gia', ma l'ultima pastiglia
   restava tagliata a filo del bordo e sembrava un difetto invece che un
   invito a scorrere. Un po' di respiro in fondo, e lo scorrimento morbido
   del telefono. */
@media (max-width: 959.98px) {
  html body.nedate-ui-standard .nedate-notification-filters {
    padding-right: 2rem !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }
  html body.nedate-ui-standard .nedate-notification-filter {
    scroll-snap-align: start !important;
  }
}

/* --- il pannello aperto sta sopra le altre tendine della barra -----------
   Il pannello delle notifiche e quello del carrello, sul telefono, sono a
   tutto schermo; il menu dell'utente e' una tendina normale. Avevano lo
   **stesso** `z-index: 2000`, e a parita' vince chi viene dopo nel documento:
   il menu dell'utente, che nella barra e' scritto sotto. Risultato: se per
   sbaglio restava aperto, le sue voci — fra cui «Amministrazione», che porta
   al cruscotto — coprivano la fila dei filtri del pannello, e il dito
   finiva li'. Il pannello a tutto schermo adesso sta sopra. */
@media (max-width: 959.98px) {
  html body.nedate-ui-standard :is(.nedate-cart-dropdown, .nedate-notification-dropdown).show {
    z-index: 2060 !important;
  }
}

/* --- una riga d'elenco che e' anche un collegamento ----------------------
   `sw-listrow` nasce come riquadro; quando e' un `<a>` — l'elenco degli
   ultimi iscritti sul cruscotto — il sito ci mette la sottolineatura dei
   link e il testo diventa un pasticcio. Qui resta una riga. */
html body.nedate-ui-standard a.sw-listrow,
html body.nedate-ui-standard a.sw-listrow:hover {
  text-decoration: none !important;
}
html body.nedate-ui-standard a.sw-listrow :is(span, strong, div) {
  text-decoration: none !important;
}
html body.nedate-ui-standard a.sw-listrow:hover {
  background: var(--sw-surface-2, rgba(15, 23, 42, .04)) !important;
}


/* =========================================================================
   166. LA RIGA CON L'INTERRUTTORE — `sw-switchrow`
   -------------------------------------------------------------------------
   Le impostazioni generali contano ventidue interruttori. Stavano in una
   griglia a tre colonne, con l'etichetta in grassetto accanto alla levetta e
   la spiegazione sotto: a schermo largo tre spiegazioni diverse si leggevano
   in parallelo, e su telefono ogni voce diventava un blocco alto due dita
   senza niente che la separasse dalla successiva.

   Una preferenza e' una **riga**: a sinistra cosa fa e perche', a destra
   l'interruttore, e un filo sotto a chiudere. Una sotto l'altra si scorrono
   con l'occhio invece che a zig-zag.

   La levetta non la ridisegno: dentro `sw-forms` esiste gia', costruita coi
   token nella 78. Qui si sistema solo la riga che la contiene.
   ========================================================================= */
html body.nedate-ui-standard .sw-switchrow {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: .8rem 0 !important;
  /* Niente cornice, niente fondo, niente ombra: la riga vive dentro il
     pannello e ne prende la superficie. Il filo che c'era sotto ogni riga
     era l'ultimo residuo della scatola (2026-09-14). */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html body.nedate-ui-standard .sw-switchrow:first-child {
  padding-top: 0 !important;
}
html body.nedate-ui-standard .sw-switchrow:last-child {
  padding-bottom: 0 !important;
}

/* Se una riga finisce dentro una scatola scritta a mano — `border`,
   `bg-light`, `rounded-*` di Bootstrap — la scatola si spegne lo stesso:
   l'interruttore non e' una scheda. */
html body.nedate-ui-standard .sw-switchrow:is([class*="border"], [class*="bg-"], [class*="rounded"]),
html body.nedate-ui-standard :is(.form-check, .form-switch).sw-switchrow__ctl:is([class*="border"], [class*="bg-"], [class*="rounded"]) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.nedate-ui-standard .sw-switchrow__copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body.nedate-ui-standard .sw-switchrow__title {
  display: block !important;
  color: var(--sw-ink) !important;
  font-size: .92rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.35 !important;
}
html body.nedate-ui-standard .sw-switchrow__sub {
  display: block !important;
  margin-top: .3rem !important;
  color: var(--sw-muted) !important;
  font-size: .8rem !important;
  font-weight: var(--sw-weight-normal, 400) !important;
  line-height: 1.55 !important;
}

/* La levetta sta a destra e non si stringe. `.form-switch` dentro `sw-forms`
   e' gia' `inline-flex` con `padding-left: 0`: qui basta toglierle il
   margine di riga che Bootstrap mette alla casella. */
html body.nedate-ui-standard .sw-switchrow__ctl {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.nedate-ui-standard .sw-switchrow__ctl input.form-check-input[type="checkbox"] {
  margin: .1rem 0 0 0 !important;
  cursor: pointer !important;
}

/* Spenta, la riga si spegne anche lei: e' il modo piu' corto per far vedere
   quali moduli sono attivi scorrendo, senza aggiungere una pastiglia di stato
   a ogni voce. */
html body.nedate-ui-standard .sw-switchrow:has(input[type="checkbox"]:not(:checked)) .sw-switchrow__title {
  color: var(--sw-muted) !important;
}

/* Una preferenza che non si puo' cambiare da qui — la governa un altro
   interruttore — resta leggibile ma non finge di essere cliccabile. */
html body.nedate-ui-standard .sw-switchrow:has(input[type="checkbox"]:disabled) {
  cursor: default !important;
}
html body.nedate-ui-standard .sw-switchrow:has(input[type="checkbox"]:disabled) .sw-switchrow__ctl {
  opacity: .55 !important;
}

/* =========================================================================
   167. LA BARRA DEL SALVA CHE RESTA — `sw-savebar`
   -------------------------------------------------------------------------
   Un modulo di impostazioni lungo tredici sezioni ha il suo pulsante in fondo
   a tutto: per salvare una casella cambiata in cima si scorre l'intera
   pagina, e chi non lo sa pensa che la modifica si salvi da sola.

   La barra si appoggia in basso mentre si scorre e torna nel flusso alla
   fine. Serve a qualunque modulo lungo, non solo a questo.
   ========================================================================= */
html body.nedate-ui-standard .sw-savebar {
  position: sticky !important;
  bottom: .75rem !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .75rem !important;
  margin-top: 1.5rem !important;
  padding: .85rem 1.1rem !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10) !important;
}
html body.nedate-ui-standard .sw-savebar__note {
  flex: 1 1 12rem !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--sw-muted) !important;
  font-size: .8rem !important;
  line-height: 1.45 !important;
}
html body.nedate-ui-standard .sw-savebar > .btn {
  flex: 0 0 auto !important;
}
/* Sul telefono la barra si mangiava un quinto dello schermo: la frase di
   servizio e i pulsanti incolonnati facevano 155px su 844. La frase sparisce —
   dice una cosa utile ma non necessaria — e i pulsanti si dividono la riga. */
@media (max-width: 575.98px) {
  html body.nedate-ui-standard .sw-savebar {
    gap: .5rem !important;
    padding: .65rem .75rem !important;
  }
  html body.nedate-ui-standard .sw-savebar__note {
    display: none !important;
  }
  html body.nedate-ui-standard .sw-savebar > .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}


/* =========================================================================
   168. IL PULSANTE «SCEGLI FILE», CHE NESSUNO AVEVA MAI VESTITO
   -------------------------------------------------------------------------
   Il campo che carica un file e' un controllo come gli altri — cornice,
   altezza, angoli li prende dal sistema — ma il pulsante che ci sta dentro
   e' un pseudo-elemento, e quello era rimasto com'e' uscito dal browser: un
   rettangolo scuro a spigoli vivi dentro un campo chiaro e arrotondato.
   Nel sistema dei moduli c'era gia' una regola, ma legge i token
   `--nd-form-standard-*` che nel guscio dell'amministrazione non esistono:
   la `color-mix` restava senza valore e il browser rimetteva il suo.

   Qui il pulsante sta dentro il campo invece di appiccicarsi al bordo: cosi'
   non deve indovinare il rientro del campo, che cambia da pagina a pagina.
   ========================================================================= */
html body.nedate-ui-standard input[type="file"].form-control::file-selector-button {
  margin: 0 .85rem 0 0 !important;
  padding: .3rem .85rem !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 999px !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  color: var(--sw-ink) !important;
  font-size: .8rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: background-color .16s ease, border-color .16s ease !important;
}
html body.nedate-ui-standard input[type="file"].form-control::file-selector-button:hover {
  background: var(--sw-surface-3, #e8eef6) !important;
  border-color: var(--sw-line-strong) !important;
}


/* =========================================================================
   169. IL BLOCCHETTO DI CODICE — `sw-code`
   -------------------------------------------------------------------------
   Serve dove si mostra un pezzo di file, una risposta di un servizio o una
   riga di esempio: l'importazione del catalogo, le chiavi API, i webhook.
   Finora ogni pagina se lo disegnava da sola — o non lo disegnava affatto, e
   il `<pre>` usciva col carattere e il fondo del browser.

   Scorre di lato invece di allargare la pagina: una riga lunga di CSV non
   deve poter spingere fuori schermo la colonna che la contiene.
   ========================================================================= */
html body.nedate-ui-standard .sw-code {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: .75rem .9rem !important;
  overflow-x: auto !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important;
  font-size: .74rem !important;
  line-height: 1.7 !important;
  white-space: pre !important;
  -webkit-overflow-scrolling: touch !important;
}
html body.nedate-ui-standard .sw-code > code {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  font: inherit !important;
}


/* =========================================================================
   170. LA RIGA CHIAVE/VALORE QUANDO IL VALORE E' UN GRUPPO — `sw-kv--stack`
   -------------------------------------------------------------------------
   `sw-kv` nasce per una parola a sinistra e un numero a destra, e su quel
   mestiere sta bene anche su schermo stretto. Ma dove il valore e' un gruppo
   di pastiglie — i nomi che una colonna del CSV puo' avere — sul telefono la
   riga si spezza male: l'etichetta si stringe fino ad andare a capo lei, e
   l'asterisco dell'obbligatorieta' finisce da solo sulla riga dopo.

   Il modificatore manda il valore sotto la sua etichetta, allineato a
   sinistra, sotto i 576px. Serve a qualunque riga con un valore lungo.
   ========================================================================= */
@media (max-width: 575.98px) {
  html body.nedate-ui-standard .sw-kv--stack {
    display: block !important;
  }
  /* Va a capo **ogni** figlio, non solo `strong`.
     La prima stesura guardava soltanto `> strong`, ma quasi tutte le righe
     scritte da allora hanno il valore dentro uno `<span>`: e uno `<span>` e'
     in linea, quindi con il genitore a `display: block` etichetta e valore
     finivano attaccati sulla stessa riga. Misurato su «Ricavo / 28.450,00 EUR»
     a 390px: l'etichetta finiva a 77px e il valore cominciava a 77px —
     «Ricavo28.450,00 EUR». Il `gap: 14px` non c'entrava niente, perche' su un
     blocco il `gap` non si applica. */
  html body.nedate-ui-standard .sw-kv--stack > * {
    display: block !important;
    /* Sopra i 576px un valore lungo — un indirizzo — sta meglio allineato a
       destra, dove finisce la riga. Sotto, in colonna, quell'allineamento
       lascerebbe l'ultima parola da sola a destra: qui torna a sinistra. */
    text-align: left !important;
  }
  html body.nedate-ui-standard .sw-kv--stack > *:not(:first-child) {
    margin-top: .45rem !important;
  }
  /* Quando il valore e' un gruppo di pastiglie, restano in riga fra loro. */
  html body.nedate-ui-standard .sw-kv--stack > strong {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: .3rem !important;
  }
}


/* =========================================================================
   171. IL FRANCOBOLLO CHE CONTIENE UNA FOTO — `sw-logo--photo`
   -------------------------------------------------------------------------
   `sw-logo` nasce per un marchio: `object-fit: contain` e un po' di aria
   intorno, perche' un logo tagliato non si riconosce piu'. La foto di un
   prodotto vuole il contrario — riempie il riquadro e si lascia ritagliare,
   o in una riga d'elenco diventa un francobollo con due dita di bianco
   attorno. Stessa misura e stessa cornice, solo un altro modo di stare
   dentro.
   ========================================================================= */
html body.nedate-ui-standard .sw-logo--photo {
  padding: 0 !important;
}
html body.nedate-ui-standard .sw-logo--photo > img {
  object-fit: cover !important;
}

/* Un'immagine marcata `hidden` deve restare nascosta: il `display: block`
   della 148 e' `!important` e vinceva sul `display:none` che il browser da'
   a `[hidden]`, cosi' l'anteprima vuota della foto prodotto si vedeva come
   un'icona di immagine rotta con il testo alternativo di fianco. */
html body.nedate-ui-standard .sw-logo > img[hidden] {
  display: none !important;
}


/* =========================================================================
   172. IL TITOLO DI UNA RIGA CHE E' ANCHE UN COLLEGAMENTO — `sw-rowlink`
   -------------------------------------------------------------------------
   Terza volta che incontro lo stesso inciampo: in tema scuro il sito tinge di
   rosso ogni `<a>`, e il nome del prodotto in cima alla riga dell'elenco —
   che e' un titolo, non un invito a cliccare — diventava rosso mentre in
   chiaro era inchiostro. Era gia' successo a `sw-panel__action` e alle
   pastiglie dei filtri; qui il rimedio diventa un mattone, cosi' la quarta
   volta non c'e'.

   Il prefisso pesante non e' vezzo: la regola che colora i collegamenti in
   scuro pesa piu' di una classe e porta `-webkit-text-fill-color`, che vince
   su `color` e si eredita.
   ========================================================================= */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] a.sw-rowlink {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  text-decoration: none !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] a.sw-rowlink:hover,
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] a.sw-rowlink:focus-visible {
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
}


/* =========================================================================
   175. LA BARRA DEL SALVA CHE STA FERMA — `sw-savebar--fermo`
   -------------------------------------------------------------------------
   La 167 fa una barra che si appoggia in basso mentre si scorre: su un modulo
   di tredici sezioni e' quello che serve. Su un modulo corto no — passa
   davanti ai campi mentre si scrive e sembra staccata dalla pagina.

   Il modificatore la rimette nel flusso, dove finisce il modulo: stesso
   vestito, niente galleggiamento e niente ombra da cosa sollevata. Sul
   telefono, non rubando piu' spazio allo schermo, la frase di servizio torna
   a vedersi.
   ========================================================================= */
html body.nedate-ui-standard .sw-savebar--fermo {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* Sul telefono la frase torna a vedersi, ma su una riga sua: lasciata a
   dividersi lo spazio coi pulsanti li stringeva fino a tagliare «Salva». */
@media (max-width: 575.98px) {
  html body.nedate-ui-standard .sw-savebar--fermo .sw-savebar__note {
    display: block !important;
    flex: 1 1 100% !important;
  }
}


/* =========================================================================
   178. LA RIGA RIPETIBILE DI UN MODULO — `sw-itemrow`
   -------------------------------------------------------------------------
   Le righe di merce di un trasferimento, le voci di una lista bianca, i
   recapiti che si aggiungono uno alla volta: sono tutte la stessa cosa — una
   riga di campi che si puo' aggiungere e togliere. Finora ognuna se la
   cavava con un `mb-3` e nient'altro, e due righe una sotto l'altra si
   leggevano come un unico blocco di campi.

   Un filo sopra separa una riga dalla precedente — la prima non ce l'ha — e
   il rientro in cima da' l'aria che serve a capire dove ricomincia.
   ========================================================================= */
html body.nedate-ui-standard .sw-itemrow {
  margin: 0 !important;
  padding: .9rem 0 0 !important;
}
html body.nedate-ui-standard .sw-itemrow + .sw-itemrow {
  margin-top: .9rem !important;
  border-top: 1px solid var(--sw-line) !important;
}


/* =========================================================================
   179. LA PASTIGLIA CHE E' ANCHE UN COLLEGAMENTO — `a.sw-tag`
   -------------------------------------------------------------------------
   Quarta volta, stessa radice: in tema scuro il sito tinge di rosso ogni
   `<a>`. Una pastiglia che porta da qualche parte — «Spedizione #5521»
   accanto a un ordine importato — in chiaro era grigia come le sue sorelle e
   in scuro diventava rosa. Misurato: `rgb(97,112,135)` in chiaro, uguale alla
   pastiglia di fianco; in scuro `srgb(.99 .57 .59)` contro `rgb(143,161,184)`
   della sorella.

   Una pastiglia e' una pastiglia in tutti e due i temi. Che porti altrove lo
   dice il cursore, e il colore del marchio arriva quando ci si passa sopra.
   ========================================================================= */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] a.sw-tag {
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
  text-decoration: none !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] a.sw-tag:hover,
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] a.sw-tag:focus-visible {
  color: var(--sw-brand-600) !important;
  -webkit-text-fill-color: var(--sw-brand-600) !important;
  border-color: var(--sw-line-strong) !important;
}


/* =========================================================================
   180. LA PAGINA CHE VA IN STAMPA — `sw-noprint`, `sw-labelsheet`, `sw-label`
   -------------------------------------------------------------------------
   Le etichette dei prodotti esistono per finire su carta, e la pagina se la
   cavava con una riga scritta dentro la vista:
   `@media print{.sidebar,.navbar,.btn,.card-header{display:none}}`.
   Nascondeva quattro cose su dieci: sul foglio restavano la testata, le dieci
   pastiglie della barra di sezione, gli avvisi e tutto il pie' di pagina del
   sito — indirizzo, newsletter, loghi dei pagamenti — attorno a venti
   etichette.

   Qui la stampa diventa un mattone. Su carta non hanno senso la barra in
   alto, il menu laterale e il pie' di pagina: quelli spariscono per tutti.
   Il resto lo decide la pagina, marcando con `sw-noprint` quello che serve
   allo schermo e non alla carta. Serve anche ai movimenti del portafoglio,
   che un pulsante «Stampa» ce l'hanno gia'.
   ========================================================================= */
@media print {
  html body.nedate-ui-standard :is(nav.navbar, .adm-sidebar, .nedate-sidebar, footer, .sw-noprint) {
    display: none !important;
  }

  /* Il guscio dell'area riservata tiene lo spazio per la barra e i rientri
     larghi: su carta sono margine buttato. */
  html body.nedate-ui-standard :is(.content-with-navbar, #app3d, main) {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
  html body.nedate-ui-standard .nedate-main-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  /* Un pannello, sulla carta, e' solo il suo contenuto. */
  html body.nedate-ui-standard .sw-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* --- il foglio di etichette --------------------------------------------- */
html body.nedate-ui-standard .sw-labelsheet {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: .75rem !important;
}

html body.nedate-ui-standard .sw-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .4rem !important;
  padding: .75rem !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px !important;
  text-align: center !important;
  /* un'etichetta tagliata a meta' fra due fogli e' carta buttata */
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}
html body.nedate-ui-standard .sw-label__name {
  color: var(--sw-ink) !important;
  font-size: .8rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.3 !important;
}
html body.nedate-ui-standard .sw-label__sub {
  color: var(--sw-muted) !important;
  font-size: .68rem !important;
  line-height: 1.4 !important;
}
html body.nedate-ui-standard .sw-label__barcode {
  width: 100% !important;
  height: 56px !important;
  object-fit: contain !important;
}
html body.nedate-ui-standard .sw-label__qr {
  width: 72px !important;
  height: 72px !important;
}

@media print {
  /* Su carta: niente fondo colorato da stampare, quattro per riga, e i
     codici in nero pieno perche' un lettore ottico non legge il grigio. */
  html body.nedate-ui-standard .sw-labelsheet {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: .4rem !important;
  }
  html body.nedate-ui-standard .sw-label {
    background: #fff !important;
    border-color: #999 !important;
  }
  html body.nedate-ui-standard :is(.sw-label__name, .sw-label__sub) {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }
}


/* =========================================================================
   182. L'ETICHETTA FLOTTANTE E LA PASTIGLIA DELL'UNITA'
   -------------------------------------------------------------------------
   Un campo con l'unita' di misura dentro — «kg», «%», «pz» — ha in alto
   l'etichetta e a destra la pastiglia, e le due si incontrano: su
   /smart-routing «Peso della velocita'» finiva sotto al «%», quarantuno pixel
   di sovrapposizione, misurati.

   L'etichetta si ferma prima. Tre rem bastano per l'unita' piu' lunga che il
   sito usa, e non tolgono niente ai campi senza unita' perche' la regola li
   riguarda solo quando la pastiglia c'e' davvero.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .form-floating:has(> .input-unit) > label {
  padding-right: 3rem !important;
}


/* =========================================================================
   183. LA BARRETTA COLORATA — `sw-meter--go/--wait/--stop`
   -------------------------------------------------------------------------
   `sw-meter` disegna sempre una barra verde: nata per una percentuale che e'
   bene sia alta. Sul mix degli stati di tracciatura non va: «consegnato» e
   «smarrito» finivano dello stesso verde, e la barra piu' lunga era quella
   che si vorrebbe piu' corta.

   Tre varianti prendono i colori degli stati (`sw-state`), cosi' la barretta
   dice la stessa cosa della pastiglia che le sta accanto.
   ========================================================================= */
html body.nedate-ui-standard .sw-meter--ok > span {
  background: var(--sw-success) !important;
}
html body.nedate-ui-standard .sw-meter--go > span {
  background: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard .sw-meter--wait > span {
  background: var(--sw-warning, #d97706) !important;
}
html body.nedate-ui-standard .sw-meter--stop > span {
  background: var(--sw-danger) !important;
}


/* Semantic meter for server-rendered percentages.
   The value lives in the HTML value attribute instead of an inline width. */
html body.nedate-ui-standard .sw-meter-native {
  display: block !important;
  width: 100% !important;
  height: 8px !important;
  margin-top: .3rem !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--sw-line) !important;
}
html body.nedate-ui-standard .sw-meter-native::-webkit-progress-bar {
  background: var(--sw-line) !important;
  border-radius: 999px !important;
}
html body.nedate-ui-standard .sw-meter-native::-webkit-progress-value {
  background: var(--sw-success) !important;
  border-radius: 999px !important;
}
html body.nedate-ui-standard .sw-meter-native::-moz-progress-bar {
  background: var(--sw-success) !important;
  border-radius: 999px !important;
}
html body.nedate-ui-standard .sw-meter-native--go::-webkit-progress-value { background: var(--sw-brand-600) !important; }
html body.nedate-ui-standard .sw-meter-native--wait::-webkit-progress-value { background: var(--sw-warning, #d97706) !important; }
html body.nedate-ui-standard .sw-meter-native--stop::-webkit-progress-value { background: var(--sw-danger) !important; }
html body.nedate-ui-standard .sw-meter-native--ok::-webkit-progress-value { background: var(--sw-success) !important; }
html body.nedate-ui-standard .sw-meter-native--go::-moz-progress-bar { background: var(--sw-brand-600) !important; }
html body.nedate-ui-standard .sw-meter-native--wait::-moz-progress-bar { background: var(--sw-warning, #d97706) !important; }
html body.nedate-ui-standard .sw-meter-native--stop::-moz-progress-bar { background: var(--sw-danger) !important; }
html body.nedate-ui-standard .sw-meter-native--ok::-moz-progress-bar { background: var(--sw-success) !important; }

html body.nedate-ui-standard .sw-table-meter-col {
  min-width: 180px !important;
}


/* Shared desktop widths for inline table editors.
   Keeps reconciliation/admin forms aligned without view-level inline CSS. */
html body.nedate-ui-standard .sw-table-edit-col {
  min-width: 230px !important;
}
html body.nedate-ui-standard .sw-table-edit-col--wide {
  min-width: 300px !important;
}
html body.nedate-ui-standard .sw-inline-number {
  max-width: 120px !important;
}
html body.nedate-ui-standard .sw-inline-select {
  min-width: 200px !important;
  max-width: 220px !important;
}
html body.nedate-ui-standard .sw-inline-select-sm {
  min-width: 130px !important;
}


/* Table cells that hold long technical values such as webhook URLs/events. */
html body.nedate-ui-standard .sw-table-code-col {
  max-width: 260px !important;
}


/* =========================================================================
   184. L'ANTEPRIMA DI UNA PAGINA PUBBLICA — `sw-preview`
   -------------------------------------------------------------------------
   Il portale dei resi si configura da qui e si vede da un'altra parte: senza
   un'anteprima si salva alla cieca. Il finto schermo c'era gia', ma vestito
   nella pagina con `#f8fafc`, `#fff` e un raggio scritto a mano — in tema
   scuro restava una lastra chiara.

   Il mattone da' la cornice e le superfici del tema; il colore del marchio
   resta inline, perche' quello lo sceglie chi configura ed e' l'unica cosa
   che deve cambiare a ogni portale.
   ========================================================================= */
html body.nedate-ui-standard .sw-preview {
  overflow: hidden !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border-top: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .sw-preview__head {
  display: block !important;
  padding: 1.25rem 1.1rem !important;
  background: var(--sw-brand-600, #e61a0a);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Il colore bianco sul fondo del marchio lo deve tenere anche il figlio:
   una regola generale tinge ogni `small` dentro `main` di grigio-azzurro
   (--sw-ink-small), e sull'anteprima l'occhiello finiva a 1.37:1 sul fondo
   del negozio — cioe' invisibile. Misurato sul widget del checkout, ma il
   difetto era anche sul portale dei resi: stesso mattone. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .sw-preview__head :is(small, strong, span) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html body.nedate-ui-standard .sw-preview__head > small {
  display: block !important;
  opacity: .82 !important;
  font-size: .72rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
html body.nedate-ui-standard .sw-preview__head > strong {
  display: block !important;
  margin: .2rem 0 .3rem !important;
  font-size: 1.15rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.25 !important;
}
html body.nedate-ui-standard .sw-preview__head > span {
  display: block !important;
  opacity: .95 !important;
  font-size: .8rem !important;
  line-height: 1.5 !important;
}
html body.nedate-ui-standard .sw-preview__body {
  padding: 1.1rem !important;
  background: var(--sw-surface) !important;
}
html body.nedate-ui-standard .sw-preview__field {
  padding: .7rem .85rem !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px !important;
  color: var(--sw-muted) !important;
  font-size: .82rem !important;
}
html body.nedate-ui-standard .sw-preview__cta {
  padding: .7rem 1rem !important;
  background: var(--sw-brand-600, #e61a0a);
  border-radius: 10px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: .85rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  text-align: center !important;
}


/* =========================================================================
   185. LA PAGINA CON IL MARCHIO DI QUALCUN ALTRO — `sw-brandable`
   -------------------------------------------------------------------------
   Il portale dei resi e' bianco: chi lo apre vede il marchio del negozio, non
   il nostro. Il colore lo sceglie il negoziante e arriva come variabile.
   Finora la pagina se lo dichiarava e poi lo perdeva per strada: il pulsante
   «Trova l'ordine» — la sola cosa da premere — restava del rosso del sito,
   mentre il pannello accanto era gia' del colore del negozio. Misurato.

   Qui il colore diventa un gettone che vale per tutta la pagina, e i tre
   pezzi che lo devono portare — pastiglia, numeri dei passi, pulsante — lo
   prendono da li'. Serve a ogni pagina in bianco: resi, stato del reso,
   tracciatura pubblica.
   ========================================================================= */
html body.nedate-ui-standard .sw-brandable {
  --sw-brand-custom: var(--brand-color, var(--sw-brand-600));
}


html body.nedate-ui-standard .sw-public-container {
  max-width: 1120px !important;
}
html body.nedate-ui-standard .sw-public-container--compact {
  max-width: 1020px !important;
}
html body.nedate-ui-standard .sw-content-narrow {
  max-width: 860px !important;
}
html body.nedate-ui-standard .sw-details-editor {
  min-width: 320px !important;
  max-width: 420px !important;
}
html body.nedate-ui-standard .sw-details-editor--wide {
  min-width: 340px !important;
  max-width: none !important;
}

html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable .sw-btn-brand,
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable .sw-btn-brand:hover,
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable .sw-btn-brand:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--sw-brand-custom) !important;
  border: 1px solid var(--sw-brand-custom) !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable .sw-btn-brand:hover {
  filter: brightness(.94) !important;
}

/* La pastiglia della testata e i numeri dei passi: stesso colore, tenue. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable .sw-hero-kicker {
  color: var(--sw-brand-custom) !important;
  -webkit-text-fill-color: var(--sw-brand-custom) !important;
  background: color-mix(in srgb, var(--sw-brand-custom) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--sw-brand-custom) 24%, transparent) !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable .sw-hero-title > span {
  color: var(--sw-brand-custom) !important;
  -webkit-text-fill-color: var(--sw-brand-custom) !important;
}

/* --- il passo numerato ---------------------------------------------------
   «1 · trova l'ordine», «2 · scegli cosa rendere». Serve a qualunque pagina
   che spieghi una procedura in tre mosse. */
html body.nedate-ui-standard .sw-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: .9rem !important;
  padding: .85rem 0 !important;
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard .sw-step:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body.nedate-ui-standard .sw-step:first-child { padding-top: 0 !important; }
html body.nedate-ui-standard .sw-step__n {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  background: color-mix(in srgb, var(--sw-brand-custom, var(--sw-brand-600)) 12%, transparent) !important;
  border-radius: 999px !important;
  color: var(--sw-brand-custom, var(--sw-brand-600)) !important;
  -webkit-text-fill-color: var(--sw-brand-custom, var(--sw-brand-600)) !important;
  font-size: .85rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
}
html body.nedate-ui-standard .sw-step__copy { min-width: 0 !important; }
html body.nedate-ui-standard .sw-step__title {
  display: block !important;
  color: var(--sw-ink) !important;
  font-size: .95rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.35 !important;
}
html body.nedate-ui-standard .sw-step__sub {
  display: block !important;
  margin-top: .25rem !important;
  color: var(--sw-muted) !important;
  font-size: .82rem !important;
  line-height: 1.55 !important;
}


/* =========================================================================
   186. IL CAMPO COLORE — `sw-colorfield`
   -------------------------------------------------------------------------
   Tre pagine fanno scegliere un colore — il tema della piattaforma, la
   pagina di tracciatura, il widget del checkout — e tutte e tre mettevano in
   riga un `<input type="color">` nudo: nel tema del sito diventa una lastra
   alta 48px con dentro una striscia di colore alta 4, senza etichetta
   attaccata e senza il codice scritto da nessuna parte. Misurato sul widget:
   la riga del colore era l'unico campo del modulo senza etichetta flottante,
   e per sapere che colore fosse bisognava aprire il selettore.

   Qui il campo prende la geometria degli altri: stessa altezza, stesso filo,
   stesso raggio. Il colore e' un bollo tondo a sinistra, il nome sopra e il
   codice esadecimale sotto — e il codice lo tiene aggiornato
   `nedate-form-standardizer.js`, che sta gia' su ogni pagina.
   ========================================================================= */
html body.nedate-ui-standard .sw-colorfield {
  display: flex !important;
  align-items: center !important;
  gap: .85rem !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: .55rem .85rem !important;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-control-r, 10px) !important;
  cursor: pointer !important;
}
html body.nedate-ui-standard .sw-colorfield:focus-within {
  border-color: var(--sw-brand-600) !important;
}

/* Il bollo. Il browser disegna dentro l'input una cornice sua: si toglie,
   se no il colore si vede solo al centro di un rettangolo grigio. */
/* Il prefisso pesante serve al raggio: la regola generale dei controlli
   (`--sw-control-r`) arriva con un id nel selettore e vince su una classe,
   per quanto ripetuta. Misurato: il bollo restava un quadrato da 10px. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .sw-colorfield > input[type="color"] {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  overflow: hidden !important;
}
html body.nedate-ui-standard .sw-colorfield > input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
}
html body.nedate-ui-standard .sw-colorfield > input[type="color"]::-webkit-color-swatch {
  border: 0 !important;
  border-radius: 50% !important;
}
html body.nedate-ui-standard .sw-colorfield > input[type="color"]::-moz-color-swatch {
  border: 0 !important;
  border-radius: 50% !important;
}

html body.nedate-ui-standard .sw-colorfield__copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html body.nedate-ui-standard .sw-colorfield__title {
  display: block !important;
  color: var(--sw-muted) !important;
  font-size: .72rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
/* Il bollo da solo, senza campo: serve alla striscia dei colori del tema, che
   mostra in fila quelli scelti. */
html body.nedate-ui-standard .sw-swatch {
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 6px !important;
}

html body.nedate-ui-standard .sw-colorfield__code {
  display: block !important;
  margin-top: .15rem !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important;
  font-size: .84rem !important;
  line-height: 1.3 !important;
}


/* =========================================================================
   187. IL PANNELLO CHE RESTA IN VISTA — `sw-stick`
   -------------------------------------------------------------------------
   Una pagina di configurazione con l'anteprima accanto ha due colonne di
   altezza diversa: sul widget del checkout il modulo e' 1710px e l'anteprima
   finisce a 1010, quindi per gli ultimi settecento pixel a destra non c'e'
   piu' niente — e l'anteprima, che dovrebbe mostrare l'effetto di quello che
   si sta cambiando, e' gia' scorsa via da un pezzo.

   Il mattone tiene il pannello agganciato sotto la barra mentre la colonna
   accanto scorre. Sotto i 1200px le colonne sono incolonnate e agganciare
   non ha senso: torna una scatola come le altre.

   La pagina del carrello faceva gia' cosi' con una regola tutta sua
   (`.cart-page .cart-summary-panel`): questa e' la stessa cosa, riusabile.
   ========================================================================= */
@media (min-width: 1200px) {
  html body.nedate-ui-standard .sw-stick {
    position: sticky !important;
    top: calc(var(--sw-nav-height, 56px) + 1rem) !important;
    z-index: 1 !important;
  }
}


/* =========================================================================
   188. LA LINEA DELL'ANDAMENTO — `sw-spark`
   -------------------------------------------------------------------------
   Il servizio delle statistiche calcola tre serie giornaliere — spedizioni,
   viste della pagina di tracciamento, interazioni di marketing — e la pagina
   le buttava via: trenta numeri al giorno che nessuno vedeva.

   Il mattone e' solo la cornice: la linea e' un `<polyline>` costruito coi
   numeri veri, senza librerie. Niente a che vedere con le barrette disegnate
   col CSS che stavano sulla pagina degli avvisi (§191): quelle salivano
   sempre uguali, queste salgono se salgono i numeri.

   `vector-effect: non-scaling-stroke` sul tratto, se no allargando la
   viewBox la linea diventa un nastro.
   ========================================================================= */
html body.nedate-ui-standard .sw-spark {
  display: block !important;
  width: 100% !important;
  height: 46px !important;
  margin-top: .35rem !important;
  overflow: visible !important;
  color: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard .sw-spark polyline {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}
html body.nedate-ui-standard .sw-spark--quiet { color: var(--sw-muted) !important; }
html body.nedate-ui-standard .sw-spark--ok { color: var(--sw-success) !important; }


/* =========================================================================
   189. IL METODO HTTP — `sw-method`
   -------------------------------------------------------------------------
   GET, POST, PUT, PATCH, DELETE. Le pagine della documentazione se lo
   disegnavano da sole dentro 936 righe di `<style>` in linea, e nessun'altra
   pagina poteva riusarlo: la lista dei webhook e quella delle chiavi API
   mostrano metodi e li scrivevano come testo semplice.

   Cinque toni distinguibili, presi dai colori di sistema: leggere GET e
   DELETE non deve dipendere dal colore soltanto, quindi la parola resta
   scritta per esteso e in maiuscolo.
   ========================================================================= */
html body.nedate-ui-standard .sw-method {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 4.2rem !important;
  padding: .2rem .5rem !important;
  border-radius: var(--sw-radius-xs, 6px) !important;
  font-family: var(--sw-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important;
  font-size: .7rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  letter-spacing: .04em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
html body.nedate-ui-standard .sw-method--get {
  color: var(--sw-success) !important;
  background: var(--sw-success-bg) !important;
}
html body.nedate-ui-standard .sw-method--post {
  color: var(--sw-info) !important;
  background: var(--sw-info-bg) !important;
}
html body.nedate-ui-standard .sw-method--put {
  color: var(--sw-warning) !important;
  background: var(--sw-warning-bg) !important;
}
html body.nedate-ui-standard .sw-method--patch {
  color: var(--sw-ink) !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
}
html body.nedate-ui-standard .sw-method--delete {
  color: var(--sw-danger) !important;
  /* `--sw-danger-soft` non e' definito da nessuna parte: si finiva sul ripiego
     `rgba(...,.12)`, un fondo trasparente che prende il colore di quello che
     ha sotto. Gli altri quattro metodi usano il token `*-bg`, che e' opaco. */
  background: var(--sw-danger-bg) !important;
}


/* =========================================================================
   190. L'UTILITY CHE NON C'ERA — `min-w-0`
   -------------------------------------------------------------------------
   Trentadue viste scrivono `class="min-w-0"` su una colonna dentro un `flex`,
   per permetterle di stringersi sotto la larghezza del contenuto: e' il rimedio
   classico al `min-width: auto` degli elementi flex. Solo che quella classe non
   la definiva nessuno — ne' Bootstrap ne' i fogli del progetto.

   Misurato: un figlio flex con quella classe, dentro una riga da 200px, restava
   largo 440 esattamente come senza. Finora non si e' visto perche' il testo
   andava a capo da solo; basta un indirizzo lungo o un UUID senza spazi e la
   riga esce dal contenitore.
   ========================================================================= */
html body.nedate-ui-standard .min-w-0 { min-width: 0 !important; }

/* =========================================================================
   191. IL CAMPO-BOTTONE CHE PORTA L'ICONA DENTRO — `.log-select-btn`
   -------------------------------------------------------------------------
   La nazione in /registrati e' un `<button>` vestito da campo. Teneva il
   mappamondo nel flusso, cosi' il valore partiva da 45,5px mentre l'etichetta
   restava a 17px: due partenze diverse dentro lo stesso campo, e nessuna
   delle due uguale agli altri campi della pagina (40,9px, misurato sulla
   tendina fiscale e su «Nome azienda»).

   Qui l'icona esce dal flusso e va dove sta in ogni altro campo, e il rientro
   del testo e' lo stesso gettone. La variante scatta da sola su chi porta
   l'icona: il campo della home, che non ce l'ha, non cambia di un pixel.

   Il pixel in meno sul `left` non e' un ritocco a occhio: negli altri campi
   l'icona pende dal `div` che avvolge il campo, che cornice non ne ha; qui
   pende dal bottone stesso, che invece ha 1px di cornice, e si misura dal
   bordo interno. Senza la sottrazione le due icone restano sfalsate di 1px.
   ========================================================================= */
html body.nedate-ui-standard button.log-select-btn.form-control:has(> .login-page__input-icon) {
  padding-left: var(--sw-field-text-x, 2.85rem) !important;
  /* La freccia e' la stessa dei menu a tendina (`.form-select`): stesso
     disegno, stesso tratto, stesso colore e stessa distanza dal bordo. Prima
     era un glifo `bi-chevron-down` con mezza opacita' scritto nel markup, e
     accanto a un vero menu si vedeva che erano due cose diverse. */
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23617087' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .95rem center !important;
  background-size: 16px !important;
}
html body.dark-mode[class][class][class][class] button.log-select-btn.form-control:has(> .login-page__input-icon),
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] button.log-select-btn.form-control:has(> .login-page__input-icon) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238fa1b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .95rem center !important;
  background-size: 16px !important;
}
html body.nedate-ui-standard button.log-select-btn.form-control:has(> .login-page__input-icon) > .log-label {
  left: var(--sw-field-text-x, 2.85rem) !important;
}
/* `blade-views.css` da' mezzo em di rientro al valore (`span.country-label`):
   serviva quando il mappamondo stava nel flusso e gli stava attaccato. Ora
   che l'icona e' fuori dal flusso quel mezzo em fa partire il valore 7,5px
   piu' a destra della sua etichetta, dentro lo stesso campo. Misurato:
   etichetta a 40,9px, valore a 48,4px. */
html body.nedate-ui-standard button.log-select-btn.form-control:has(> .login-page__input-icon) > .country-label {
  padding-left: 0 !important;
}
/* --- la freccia del menu a tendina ---------------------------------------
   `.form-select` la freccia ce l'ha gia' (sezione 112), ma sulle pagine
   d'accesso il tema di base scrive `background: #ffffff !important` sui
   campi: la forma breve azzera anche l'immagine, e il menu «Tipo di
   identificativo fiscale» in /registrati restava senza freccia, uguale a un
   campo di testo. Qui l'immagine torna — stesso disegno, stesso colore e
   stessa posizione gia' usati altrove — e il testo tiene il suo spazio a
   destra per non finirci sotto. */
html body.nedate-ui-standard select.form-select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23617087' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .95rem center !important;
  background-size: 16px !important;
  padding-right: 2.5rem !important;
}
/* Al buio la freccia prende l'inchiostro spento del tema: il grigio chiaro
   su fondo scuro non si vedeva. */
/* Il peso in piu' (`[class]` ripetuto) non e' vezzo: in tema scuro il tema
   d'accesso scrive `background: #0b1424 !important` sui campi, e la forma
   breve porta via anche l'immagine. Misurato: al buio la freccia spariva da
   tutti e due i menu. */
html body.dark-mode[class][class][class][class] select.form-select:not([multiple]):not([size]),
html[data-theme="dark"] body.nedate-ui-standard[class][class][class][class] select.form-select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238fa1b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .95rem center !important;
  background-size: 16px !important;
}

/* La freccia del campo-bottone stava al centro solo per caso: senza `top` si
   ferma dove la lascia il flusso del testo, e col rientro alto del campo
   finiva 9px sotto la meta'. Misurato sulla nazione in /registrati. */
html body.nedate-ui-standard .log-select-btn > .bi-chevron-down {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

html body.nedate-ui-standard .log-select-btn > .login-page__input-icon {
  left: calc(var(--sw-field-icon-x, 1.35rem) - 1px) !important;
  /* Stessa scatola dell'icona degli altri campi, se no il glifo si centra
     dentro una larghezza sua e resta mezzo pixel piu' a destra. */
  width: 1.25rem !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
/* La bandiera prende il posto del mappamondo quando la nazione e' scelta:
   stesso punto di partenza, misura sua (20x15) perche' e' un'immagine e non
   un glifo. */
html body.nedate-ui-standard .log-select-btn > .flag-ico {
  position: absolute !important;
  left: calc(var(--sw-field-icon-x, 1.35rem) - 1px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 15px !important;
}

/* =========================================================================
   192. IL PASSO FRA I CAMPI — uno solo, dentro e fuori dalla griglia
   -------------------------------------------------------------------------
   Nelle pagine d'accesso se ne sommavano due: il margine sotto al campo
   (.85rem = 11,9px, scritto da `form-modern.css`) e il passo verticale della
   griglia (12,6px). Fra due righe restavano 24,5px, mentre due campi fuori
   dalla griglia ne avevano 14 — la stessa pagina con due ritmi diversi.

   Qui il campo che chiude una colonna non porta margine suo (a distanziare
   c'e' gia' il passo della griglia) e il passo vale 1rem: 14px dappertutto.
   Misurato su /registrati, che e' la pagina con piu' campi affiancati.
   ========================================================================= */
/* Il tema d'accesso scrive `.85rem !important` su `.login-page__input-wrap`:
   per avere l'ultima parola qui si nominano tutte e due le classi, che il
   campo porta sempre insieme. */
html body.nedate-ui-standard .login-page__input-wrap.login-page__floating-field,
html body.nedate-ui-standard .login-page__floating-field {
  margin-bottom: 1rem !important;
}
/* Dentro la colonna il campo non porta margine suo, a qualunque profondita'
   stia: prima la regola chiedeva `div:last-child`, e bastava un fratello
   nascosto piu' sotto per non riconoscerlo. Sul modulo fiscale si vedeva:
   scegliendo «Codice fiscale» (ultimo blocco della colonna) la distanza dalla
   nazione era di 14px, scegliendo «Partita IVA» (con il blocco del codice
   fiscale nascosto dopo) diventava 28. */
html body.nedate-ui-standard [class*="col-"] .login-page__input-wrap.login-page__floating-field:last-child {
  margin-bottom: 0 !important;
}
/* Se nella stessa colonna restano due blocchi visibili uno sotto l'altro, fra
   loro torna il passo: il margine tolto sopra non deve farli toccare. */
html body.nedate-ui-standard [class*="col-"] > div:not(.d-none) ~ div:not(.d-none) {
  margin-top: 1rem !important;
}
html body.nedate-ui-standard .row:has(.login-page__floating-field) {
  --bs-gutter-y: 1rem !important;
  --bs-gutter-x: 1rem !important;
}

/* =========================================================================
   193. IL SUGGERITORE DELLE CITTA' — `city-dd`, una volta per tutte
   -------------------------------------------------------------------------
   La stessa tendina esce in tre posti — /registrati, la rubrica, il modulo
   di spedizione — e ognuno se la vestiva da solo. /registrati ci teneva un
   blocco di regole che rimediavano a un foglio globale: li' `.city-main` e'
   scritto in grassetto (700) e le righe prendono i colori di Bootstrap,
   percio' chi non copiava quel blocco si ritrovava un elenco in neretto.

   Qui la tendina e' vestita una volta sola, con i gettoni: al cambio di tema
   non c'e' niente da riscrivere, e chi aggiunge un campo citta' non deve
   ricopiare niente. Il raggio e' quello del campo da cui pende.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .city-dd {
  background: var(--sw-surface, #fff) !important;
  color: var(--sw-ink, #0e1b2e) !important;
  border: 1px solid var(--sw-line, #e4e9f0) !important;
  border-radius: var(--sw-field-radius, 5px) !important;
  box-shadow: var(--sw-shadow-md) !important;
  overflow: auto !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .city-dd :is(.item, .city-option) {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: .55rem !important;
  padding: .5rem .75rem !important;
  border-radius: 0 !important;
  /* Un elenco da scorrere si legge in tondo: il peso lo tiene la riga
     evidenziata, non il carattere. */
  font-weight: var(--sw-weight-normal, 400) !important;
  color: var(--sw-ink, #0e1b2e) !important;
  cursor: pointer !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .city-dd .city-main {
  font-weight: var(--sw-weight-normal, 400) !important;
  color: inherit !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .city-dd .city-meta {
  margin-left: auto !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  color: var(--sw-muted, #617087) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .city-dd :is(.item, .city-option):is(.active, :hover),
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .city-dd :is(.item, .city-option)[aria-selected="true"] {
  background: var(--sw-surface-2, #f0f4f9) !important;
  color: var(--sw-ink, #0e1b2e) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .city-dd .empty {
  padding: 20px 14px !important;
  color: var(--sw-muted, #617087) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  text-align: center !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .city-dd .autocomplete-highlight {
  font-weight: var(--sw-weight-semi, 600) !important;
  color: var(--sw-brand-700, #b5172a) !important;
}

/* =========================================================================
   194. FRA TABLET E PORTATILE IL CONTENUTO FINIVA SOTTO LA BARRA
   -------------------------------------------------------------------------
   Il telaio delle pagine d'amministrazione riserva lo spazio per la barra
   fissa in due punti soli: sotto i 768px (sezione 125, barra + 1rem) e sopra
   i 1200 (115,5px). **In mezzo non lo riserva nessuno.** Misurato sul telaio
   di «Impostazioni»: a 768px il rientro in cima e' 14px con una barra alta
   62, e a ~1010 e' 15,3px con una barra alta 72. Il titolo della pagina
   finisce sotto la barra — si vede tagliato a meta'.

   Stessa somma delle altre bande: l'altezza vera della barra piu' uno stacco.
   Vale per il telaio comune, quindi per tutte le pagine che lo usano.
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1199.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] main > :is(.nedate-main-container, .user-logistics-page, .user-dashboard-page, .dashboard-wrapper) {
    padding-top: calc(var(--sw-nav-height, 62px) + 1rem) !important;
  }
}

/* =========================================================================
   195. LE TRADUZIONI — LA COLONNA DELLA CHIAVE NON SI MANGIA IL CAMPO
   -------------------------------------------------------------------------
   Le chiavi di traduzione sono frasi intere: la piu' lunga del file italiano
   supera i 130 caratteri. Con la larghezza delle colonne decisa dal contenuto
   (`table-layout: auto`) vinceva lei: misurato a 1440px, la colonna della
   chiave prendeva **988px** e il campo dove si scrive la traduzione restava
   largo **82px** — dentro non ci sta nemmeno una parola.

   Con le larghezze fissate la chiave va a capo e il campo resta un campo.
   ========================================================================= */
html body.nedate-ui-standard .admin-language-translations-page #translations-table {
  table-layout: fixed !important;
}
html body.nedate-ui-standard .admin-language-translations-page #translations-table th:nth-child(1),
html body.nedate-ui-standard .admin-language-translations-page #translations-table td:nth-child(1) {
  width: 38% !important;
}
html body.nedate-ui-standard .admin-language-translations-page #translations-table th:nth-child(3),
html body.nedate-ui-standard .admin-language-translations-page #translations-table td:nth-child(3) {
  width: 90px !important;
}
/* La chiave va a capo dentro la sua colonna invece di allargarla. */
html body.nedate-ui-standard .admin-language-translations-page #translations-table td:nth-child(1) code {
  display: inline-block !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
}


/* =========================================================================
   196. UNA SCHEDA CHE E' ANCHE UN COLLEGAMENTO — `a.sw-panel`
   -------------------------------------------------------------------------
   `sw-panel` nasce come riquadro. Quando pero' e' un `<a>` — le schede dei
   moduli di /admin/platform, dove tutta la scheda si clicca — il sito gli
   passa il colore dei collegamenti, che qui e' il rosso del marchio.

   Misurato: `color` della scheda `rgb(181, 23, 42)`. Oggi non si vede,
   perche' titolo, sommario, pastiglia e pulsante hanno ognuno il suo colore
   e lo coprono. Basta aggiungere una riga di testo nudo dentro la scheda e
   viene fuori rossa. Qui la scheda torna a essere inchiostro.

   E gia' che c'e': una scheda che si clicca non lo diceva in nessun modo.
   Al passaggio del mouse adesso il filo si scurisce e la scheda si stacca di
   un pelo — lo stesso gesto che fa `a.sw-listrow`, che pero' li' e' una riga
   e qui e' un riquadro. */
html body.nedate-ui-standard :is(a.sw-panel, a.sw-feature),
html body.nedate-ui-standard :is(a.sw-panel, a.sw-feature):hover,
html body.nedate-ui-standard :is(a.sw-panel, a.sw-feature):focus {
  color: var(--sw-ink) !important;
  text-decoration: none !important;
}
/* Anche quello che sta dentro: misurato, l'etichetta e la cifra restavano
   sottolineate perche' la loro regola di colore vince su quella del padre. */
html body.nedate-ui-standard :is(a.sw-panel, a.sw-feature) :is(.sw-metric__label, .sw-metric__value, .sw-panel__title, .sw-panel__sub) {
  text-decoration: none !important;
}
html body.nedate-ui-standard :is(a.sw-panel, a.sw-feature) {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
html body.nedate-ui-standard :is(a.sw-panel, a.sw-feature):hover {
  border-color: var(--sw-line-strong) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .07) !important;
  transform: translateY(-1px) !important;
}
/* Chi naviga da tastiera vede l'anello, non lo spostamento. */
html body.nedate-ui-standard :is(a.sw-panel, a.sw-feature):focus-visible {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body.nedate-ui-standard :is(a.sw-panel, a.sw-feature),
  html body.nedate-ui-standard :is(a.sw-panel, a.sw-feature):hover {
    transition: none !important;
    transform: none !important;
  }
}


/* =========================================================================
   197. IL BOTTONE QUIETO CHE RESTA PREMUTO — `sw-btn-quiet--on`
   -------------------------------------------------------------------------
   `sw-btn-quiet` e' il bottone di servizio: fondo chiaro, filo sottile,
   inchiostro. Serviva anche la sua versione «questo qui e' quello scelto»,
   per le file di bottoni che funzionano come un selettore — le schede per
   lingua dell'editor delle pagine pubbliche, per prima.

   Prima quel selettore era scritto in classi Tailwind, che su questo sito
   non esistono: misurato, la lingua attiva finiva scritta in bianco su
   grigio chiaro, cioe' invisibile. Meglio un modificatore comune, che si
   legge da solo e si puo' riusare ovunque serva una fila di scelte.

   Si usa come `class="btn sw-btn-quiet"` piu' `sw-btn-quiet--on` sul
   prescelto. Il contrasto e' quello del marchio su fondo chiaro, non un
   riempimento pieno: resta un bottone di servizio, non diventa un'azione
   primaria. */
html body.nedate-ui-standard .sw-btn-quiet--on {
  background: var(--sw-brand-50, #fff2f2) !important;
  border-color: var(--sw-brand-700, #b5172a) !important;
  color: var(--sw-brand-700, #b5172a) !important;
  -webkit-text-fill-color: var(--sw-brand-700, #b5172a) !important;
  font-weight: 600 !important;
}
html body.nedate-ui-standard .sw-btn-quiet--on .sw-panel__sub {
  color: var(--sw-brand-700, #b5172a) !important;
  opacity: .85 !important;
}
html body.nedate-ui-standard .sw-btn-quiet--on:hover,
html body.nedate-ui-standard .sw-btn-quiet--on:focus-visible {
  background: var(--sw-brand-50, #fff2f2) !important;
  border-color: var(--sw-brand-700, #b5172a) !important;
  color: var(--sw-brand-700, #b5172a) !important;
}

/* Al buio il fondo tenue del marchio sparirebbe: qui si tiene il filo e si
   schiarisce l'inchiostro, che e' quello che fanno gli altri stati scuri. */
@media (prefers-color-scheme: dark) {
  html body.nedate-ui-standard[data-theme="dark"] .sw-btn-quiet--on,
  html body.nedate-ui-standard.dark-mode .sw-btn-quiet--on {
    background: rgba(181, 23, 42, .16) !important;
    border-color: rgba(229, 116, 133, .55) !important;
    color: #f3b8c1 !important;
    -webkit-text-fill-color: #f3b8c1 !important;
  }
}
html body.nedate-ui-standard[data-theme="dark"] .sw-btn-quiet--on,
html body.nedate-ui-standard.dark-mode .sw-btn-quiet--on {
  background: rgba(181, 23, 42, .16) !important;
  border-color: rgba(229, 116, 133, .55) !important;
  color: #f3b8c1 !important;
  -webkit-text-fill-color: #f3b8c1 !important;
}
html body.nedate-ui-standard[data-theme="dark"] .sw-btn-quiet--on .sw-panel__sub,
html body.nedate-ui-standard.dark-mode .sw-btn-quiet--on .sw-panel__sub {
  color: #f3b8c1 !important;
}

/* `x-cloak` serve alle schede per lingua: senza, prima che Alpine parta si
   vedono tutte le lingue una sotto l'altra. */
html body.nedate-ui-standard [x-cloak] {
  display: none !important;
}


/* =========================================================================
   198. UN CAMPO CHE CONTIENE CODICE — `sw-code-area`
   -------------------------------------------------------------------------
   L'editor delle pagine pubbliche chiede di scrivere HTML a mano. Con un
   carattere proporzionale i tag si leggono male: `<h2>` e `<h2 >` sembrano
   uguali, e l'indentazione non si allinea.

   `font-monospace` di Bootstrap non basta, e non basta nemmeno una regola
   scritta in fondo a questo foglio. Misurato con l'ispettore, su un
   `.form-control` dentro `.sw-forms` si accavallano piu' di venti regole:
   quella che vinceva e' la 86, con otto `[class]` e quattro `:not(#_)`, che
   impone il carattere geometrico a tutto cio' che e' un campo. Percio' qui
   servono due cose insieme: l'esclusione dentro la 86 — accanto a quella
   che c'era gia' per la textarea dei Termini — e questa regola, scritta con
   la stessa armatura.

   Si usa su qualunque casella che contiene codice: HTML, JSON, CSV, una
   chiave. Tiene il carattere a spaziatura fissa, un filo piu' piccolo, e
   l'interlinea larga di un editor. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(textarea, input, .form-control)[class].sw-code-area {
  font-family: var(--sw-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important;
  /* Un pelo sotto la misura degli altri campi: a spaziatura fissa le lettere
     sono piu' larghe, e alla stessa misura la riga verrebbe piu' lunga. */
  font-size: calc(var(--sw-control-fs, 15px) - 1px) !important;
  line-height: 1.6 !important;
  tab-size: 2;
}

/* Su una casella di codice l'a capo automatico e' d'aiuto: una riga lunga
   non deve costringere a scorrere in orizzontale dentro il campo. */
html body.nedate-ui-standard textarea.sw-code-area {
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
}


/* Shared textarea heights for forms that need more writing space. */
html body.nedate-ui-standard textarea.sw-textarea-md {
  height: 92px !important;
}
html body.nedate-ui-standard textarea.sw-textarea-compact {
  height: 96px !important;
}
html body.nedate-ui-standard textarea.sw-textarea-short {
  height: 6rem !important;
}
html body.nedate-ui-standard textarea.sw-textarea-lg {
  height: 120px !important;
}
html body.nedate-ui-standard textarea.sw-textarea-xl {
  height: 180px !important;
}
html body.nedate-ui-standard textarea.sw-textarea-tall {
  height: 150px !important;
}
html body.nedate-ui-standard textarea.sw-textarea-note {
  height: 110px !important;
}
html body.nedate-ui-standard textarea.sw-textarea-reason {
  height: 7rem !important;
}
html body.nedate-ui-standard textarea.sw-textarea-credit {
  height: 8rem !important;
}
html body.nedate-ui-standard textarea.sw-textarea-sm {
  height: 90px !important;
}

/* ==========================================================================
   199. LO STATO SPENTO — `sw-state--off`
   --------------------------------------------------------------------------
   Gli stati erano quattro: verde «fatto», azzurro «in corso», giallo «in
   attesa», rosso «fermo». Mancava il quinto, che e' il piu' comune di tutti:
   **spento**. Una cosa che c'e' ma non e' accesa — un piano non attivo, un
   motivo di reso disattivato, una regola sospesa.

   Senza, ogni pagina se la cavava a modo suo: sedici punti scrivevano
   `text-secondary` (testo grigio, nessuna pastiglia) e altri riusavano il
   giallo dell'attesa, che vuol dire un'altra cosa — «sta per succedere»
   invece di «non succede». Nell'elenco dei piani le due letture finivano
   nella stessa colonna, una accanto all'altra.

   Grigio pieno, stessa forma degli altri quattro, cosi' una colonna di stati
   si legge tutta allo stesso modo.
   ========================================================================== */
html body.nedate-ui-standard .sw-state--off {
  color: var(--sw-muted) !important;
  background: rgba(120, 134, 156, .14) !important;
}

/* ==========================================================================
   200. LA CORNICE DI UN'IMMAGINE — `sw-thumb`
   --------------------------------------------------------------------------
   Serve un riquadro che tenga dentro un logo o una testata: bordo, angoli
   tondi, contenuto centrato e **ritagliato**.

   Fin qui l'avevo fatto con `sw-feature`, che di aspetto e' la stessa cosa.
   Ma `sw-feature` impone `height: 100% !important` e `padding: 12px
   !important`: dandogli un'altezza inline la perde, e l'immagine grande esce
   dal riquadro e finisce **sopra** al pannello che viene dopo. Visto nella
   schermata della scheda del corriere, sull'immagine di testata di Poste.

   `sw-thumb` e' la stessa cornice senza quei due vincoli: l'altezza e la
   larghezza le decide chi la usa, e quello che sta dentro non esce.
   ========================================================================== */
html body.nedate-ui-standard .sw-thumb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 4px;
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 12px !important;
}
html body.nedate-ui-standard .sw-thumb > img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
html body.nedate-ui-standard .sw-thumb--logo-lg {
  width: 92px !important;
  height: 92px !important;
  padding: 6px !important;
}
html body.nedate-ui-standard .sw-thumb--md {
  width: 48px !important;
  height: 48px !important;
  padding: 4px !important;
}
html body.nedate-ui-standard .sw-thumb--sm {
  width: 44px !important;
  height: 44px !important;
  padding: 4px !important;
}
/* La testata e' larga: riempie il riquadro e si lascia ritagliare. */
html body.nedate-ui-standard .sw-thumb--wide {
  display: flex !important;
  width: 100% !important;
  padding: 0;
}
html body.nedate-ui-standard .sw-thumb--banner {
  height: 110px !important;
}
html body.nedate-ui-standard .sw-thumb--wide > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ==========================================================================
   201. LO SPAZIO A DESTRA DI UNA TESTATA — `sw-panel__tools`
   --------------------------------------------------------------------------
   `sw-panel__action` **e' la pastiglia**, non il contenitore: ha sfondo
   grigio, bordo e angoli a 999px, ed e' nato per un singolo collegamento
   piccolo in testa a un pannello.

   Io l'ho usato per settantadue volte come **scatola** — ci ho messo dentro
   una `sw-tag`, o un pulsante. Il risultato e' una pastiglia dentro a una
   pastiglia: due sfondi grigi e due bordi, uno dentro l'altro. Misurato:
   contenitore e figlio hanno lo stesso `rgb(240,244,249)`, lo stesso bordo di
   1px e lo stesso raggio. E su un pulsante rosso si vedeva la cornice grigia
   intorno, con il testo del contenitore che tirava all'inchiostro scuro.

   `sw-panel__tools` e' quella scatola: tiene le cose a destra della testata e
   non disegna niente.
   ========================================================================== */
html body.nedate-ui-standard .sw-panel__tools {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .5rem !important;
  margin-left: auto !important;
}

/* ==========================================================================
   202. UN CAMPO CON UN PULSANTE DENTRO — `sw-field` + `sw-field__btn`
   --------------------------------------------------------------------------
   L'occhiello che mostra una password vive dentro al campo. Finora ogni
   pagina se lo posizionava da sola, con lo stesso `position-absolute top-50
   end-0 translate-middle-y me-2` ricopiato: sette pagine, sette copie. E
   nessuna toglieva spazio al testo, cosi' un valore lungo passava **sotto**
   al pulsante.

   `sw-field` avvolge il campo, `sw-field__btn` e' il pulsante: sta a destra,
   e il testo gli si ferma prima. Il pulsante si veste con `sw-iconbtn`.

   `sw-fields--off` e' l'altra meta': un gruppo di campi spento, che si vede
   ma non e' in gioco.
   ========================================================================== */
html body.nedate-ui-standard .sw-field {
  position: relative !important;
}
/* Il testo deve fermarsi prima del pulsante. Misurato: con la corazza
   leggera restava a 16px di spazio a destra, cioe' il padding che i campi di
   `sw-forms` si danno da soli, e un valore lungo passava sotto all'occhiello.
   Qui serve la stessa corazza di quella regola, piu' uno. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class][class] .sw-field .form-floating > :is(.form-control, .form-select) {
  /* 52px: il pulsante e' largo 40 e sta a 8 dal bordo. In `rem` non
     bastava — qui la radice e' a 14px, e 3,25rem faceva 45,5. */
  padding-right: 52px !important;
}
html body.nedate-ui-standard .sw-field__btn {
  position: absolute !important;
  top: 50% !important;
  right: .5rem !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}
html body.nedate-ui-standard .sw-fields--off {
  opacity: .55 !important;
}

/* ==========================================================================
   203. IL CAMPO E LA SUA UNITA' SONO UNA SCATOLA SOLA
   --------------------------------------------------------------------------
   Il modulo del preventivo in home lo fa da sempre cosi': `log-input-group`
   e' la scatola, dentro ci stanno l'etichetta, il valore e l'unita', e
   l'unita' e' la coda del campo — vedi `welcome.blade.php`.

   Nei moduli dell'amministrazione la stessa cosa e' scritta col `input-group`
   di Bootstrap, e li' non tornava. Il bordo lo disegnava il **campo**; il
   `input-group-text` invece, per la regola della sezione «Unita' (kg, cm)»,
   e' senza bordo e senza fondo. Risultato: una scatola che finisce, e fuori,
   staccati, un «€» o un «kg» che galleggiano nel vuoto.

   Misurato su /admin/couriers/services/courier_routes/create/1, a 1440:

     campo   242 → 442   (bordo 1px #adbaca, raggio 5px)
     unita'  442 → 476   (bordo 0, sfondo trasparente)   ← fuori dalla scatola

   E siccome «€» e' largo 24px, «kg» 30 e «cm» 34, la scatola finiva ogni
   volta in un punto diverso: nella stessa riga i campi erano larghi 200, 204
   e 200px, coi bordi destri sfalsati. E' il disallineamento che si vedeva.

   Qui la scatola la disegna il **gruppo**: il campo dentro non disegna piu'
   niente, l'unita' resta dentro separata da una linea, e il bordo destro cade
   dove finisce la colonna — uguale per tutti.

   Due note sulla misura:

   - la corazza leggera non bastava. Col solo `body.nedate-ui-standard[class]x4`
     il gruppo prendeva il bordo ma il campo dentro se lo teneva lo stesso, e
     si vedevano due cornici una dentro l'altra. Serve la stessa corazza a
     livello di id che usano le altre regole dei campi (§8505, §10127).
   - i campi grandi hanno l'altezza scritta a mano (`var(--ship-field-h)`),
     quindi togliere il bordo non li accorcia: il gruppo veniva 60px contro i
     58 dei campi senza unita', accanto. Glieli tolgo io. I campi piccoli
     delle tabelle non hanno un'altezza imposta e si aggiustano da soli.
   ========================================================================== */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .input-group:has(> .input-group-text):not(:has(> .btn)):not(.nd-input-addon-group):not(.ship-dim-input-group) {
  background: var(--sw-field-bg) !important;
  border: var(--sw-field-bw) solid var(--sw-field-border) !important;
  border-radius: var(--sw-control-r, 5px) !important;
  overflow: hidden !important;
  transition: border-color var(--sw-dur-fast, .16s) var(--sw-ease, ease),
              box-shadow var(--sw-dur-fast, .16s) var(--sw-ease, ease) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .input-group:has(> .input-group-text):not(:has(> .btn)):not(.nd-input-addon-group):not(.ship-dim-input-group):focus-within {
  border-color: var(--sw-brand-500) !important;
  box-shadow: var(--sw-focus-ring) !important;
}
/* il campo dentro non ha piu' una cornice sua: la scatola e' una sola */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .input-group:has(> .input-group-text):not(:has(> .btn)):not(.nd-input-addon-group):not(.ship-dim-input-group) > .form-floating > :is(.form-control, .form-select),
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .input-group:has(> .input-group-text):not(:has(> .btn)):not(.nd-input-addon-group):not(.ship-dim-input-group) > :is(.form-control, .form-select) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* l'altezza che il campo aveva la prende il gruppo, bordo compreso */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .input-group:has(> .input-group-text):not(:has(> .btn)):not(.nd-input-addon-group):not(.ship-dim-input-group) > .form-floating,
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .input-group:has(> .input-group-text):not(:has(> .btn)):not(.nd-input-addon-group):not(.ship-dim-input-group) > .form-floating > :is(.form-control, .form-select) {
  height: calc(var(--ship-field-h) - (2 * var(--sw-field-bw))) !important;
  min-height: calc(var(--ship-field-h) - (2 * var(--sw-field-bw))) !important;
}
/* l'unita' e' la coda del campo: dentro alla stessa scatola e senza una
   riga sua, come la `log-unit` del preventivo in home — misurata li':
   bordo 0, sfondo trasparente, larga 58px. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .input-group:has(> .input-group-text):not(:has(> .btn)):not(.nd-input-addon-group):not(.ship-dim-input-group) > .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
  min-width: 44px !important;
  margin: 0 !important;
  padding: 0 .65rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ==========================================================================
   204. LA SCELTA MULTIPLA E' UN CAMPO COME GLI ALTRI
   --------------------------------------------------------------------------
   `.select2-selection--single` era gia' stata portata alla misura dei campi
   (altezza 58, bordo `--sw-field-border`). La variante **multipla** no.

   Misurato su /admin/couriers/services/courier_routes/create/1, nella stessa
   schermata, uno sotto l'altro:

     campo normale              58px   bordo #adbaca
     select2 --single           58px   bordo #adbaca
     select2 --multiple         51px   bordo #e0e3e4

   E dentro stava peggio: il campo di ricerca — quello che porta il testo
   guida «Scegli i tipi di stampa» — era alto **112px** dentro a una scatola
   di 51, e cominciava 25px **sopra** il bordo di sopra. La scritta si leggeva
   fuori dal riquadro, addosso alla riga precedente.

   La ricetta che funziona esisteva gia', in `admin-blade-extracted.css`, ma
   chiusa dentro a `.cod-edit-wrapper`: la pagina delle tariffe usa la stessa
   classe `route-multiselect-floating` e quelle regole non la raggiungevano
   mai. Qui sono riscritte coi numeri di questo sistema — l'altezza di un
   campo, i rientri di un'etichetta flottante, il bordo di tutti gli altri.

   Una riga sola che taglia: le voci scelte non mandano a capo il campo, cosi'
   la riga resta allineata anche quando se ne scelgono molte.
   ========================================================================== */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-container--default .select2-selection--multiple {
  display: flex !important;
  align-items: flex-end !important;
  /* una riga sola: col riassunto lungo di «Modelli business» il campo di
     ricerca — largo zero — andava a capo e finiva sotto al bordo di sotto.
     Misurato: riassunto a +27, ricerca a +45 in una scatola di 58. */
  flex-wrap: nowrap !important;
  height: var(--ship-field-h, 58px) !important;
  min-height: var(--ship-field-h, 58px) !important;
  max-height: var(--ship-field-h, 58px) !important;
  /* il valore sta in fondo, come in ogni campo con l'etichetta flottante:
     `align-items: center` col rientro di sopra lasciava la scritta guida
     dieci pixel sotto al bordo di sotto, e `overflow: hidden` la tagliava.
     Misurato. */
  padding: 26px 2.4rem 8px 16px !important;
  border: var(--sw-field-bw) solid var(--sw-field-border) !important;
  border-radius: var(--sw-control-r, 5px) !important;
  background: var(--sw-field-bg, #fff) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
/* Nota: qui c'era una regola che rimetteva in fila `select2-selection__rendered`.
   L'ho tolta. Su queste pagine le pastiglie delle voci scelte sono **gia'**
   spente da `admin-blade-extracted.css` quando c'e' `route-has-choices`: al
   loro posto compare `route-selected-text`, un riassunto su una riga. La mia
   regola, con la corazza a livello di id, vinceva su quel `display: none` e
   si vedevano tutte e due le cose una sopra l'altra dentro allo stesso campo.
   Misurato: riassunto a +5px dal bordo di sopra, pastiglie a +29. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-container--default .select2-selection--multiple .select2-search--inline {
  display: flex !important;
  align-items: center !important;
  height: 1.35rem !important;
  min-height: 0 !important;
  margin: 0 !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  height: 1.35rem !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35rem !important;
}

/* ==========================================================================
   205. IL CAMPO CON RICERCA (TOM SELECT) DENTRO A UN'ETICHETTA FLOTTANTE
   --------------------------------------------------------------------------
   Come `select2`, anche Tom Select si disegna una scatola sua al posto del
   `<select>`, e quella scatola non sa niente del ritmo dei campi di qui.

   Misurato su /admin/couriers/services/status/1/create, a 1440: il controllo
   e' alto 58px — giusto — ma la voce scelta ci sta dentro da 40 a 63, cioe'
   **esce di cinque pixel dal bordo di sotto**, perche' Tom Select centra il
   contenuto e non lascia posto in alto all'etichetta.

   Qui prende gli stessi rientri di un campo qualunque di `sw-forms`: 26 sopra
   per l'etichetta, 8 sotto, 16 ai lati. La cornice la disegna il controllo,
   una sola, come per gli altri campi.
   ========================================================================== */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating > .ts-wrapper {
  /* Tom Select ricopia sul guscio le classi del `<select>` di partenza, quindi
     il guscio si prende le regole dei campi e disegna una scatola sua: due
     rettangoli sfalsati, uno dentro l'altro. Misurato: guscio a 242×728 di
     656×58, controllo a 259×755 di 622×58. La cornice la disegna il
     controllo, una sola. */
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating .ts-control {
  display: flex !important;
  align-items: flex-end !important;
  flex-wrap: nowrap !important;
  height: var(--ship-field-h, 58px) !important;
  min-height: var(--ship-field-h, 58px) !important;
  padding: 0 2.4rem 9px 16px !important;
  border: var(--sw-field-bw) solid var(--sw-field-border) !important;
  border-radius: var(--sw-control-r, 5px) !important;
  background: var(--sw-field-bg, #fff) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating .ts-control > :is(.item, input) {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35rem !important;
}
/* La voce scelta si prende lo spazio che le serve; il campo di ricerca
   accanto parte da zero e si allarga con quello che avanza. Senza, in una
   riga che non va a capo il campo di ricerca partiva lungo e schiacciava la
   voce: misurato, «Shipment picked up by the courier.» in venti pixel, e si
   leggeva «Rtr». */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating .ts-control > .item {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating .ts-control > input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class][class] :is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) .form-floating .ts-wrapper.focus .ts-control {
  border-color: var(--sw-brand-500) !important;
  box-shadow: var(--sw-focus-ring) !important;
}

/* ==========================================================================
   206. L'ASTERISCO DI UN CAMPO OBBLIGATORIO E' ROSSO, SEMPRE
   --------------------------------------------------------------------------
   Nel sito l'asterisco era scritto in tre modi: `<span class="text-danger">*`
   (514 volte), `<i class="text-danger">*` (77) e **nudo**, cioe' un `*` di
   testo dentro all'etichetta (93). I primi due erano rossi, il terzo nero
   come tutto il resto dell'etichetta: lo stesso segno, tre risultati.

   `sw-req` e' il mattone, ed e' quello che va usato da qui in avanti. Le due
   forme gia' in casa prendono lo stesso rosso e perdono il corsivo, che
   sull'`<i>` rendeva l'asterisco storto.
   ========================================================================== */
html body.nedate-ui-standard .sw-req {
  color: var(--sw-danger) !important;
  -webkit-text-fill-color: var(--sw-danger) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  font-style: normal !important;
  margin-left: .15rem !important;
}

/* Required marker must stay red even inside labels that globally force
   -webkit-text-fill-color for floating-field typography. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class]
:is(.shipping-page-wrapper, .ship-sheet, .ship-fields, .sw-forms) :is(label, .form-label, .form-check-label) .sw-req {
  color: var(--sw-danger, #d92336) !important;
  -webkit-text-fill-color: var(--sw-danger, #d92336) !important;
}
html body.nedate-ui-standard :is(label, .form-label) :is(.text-danger, i.text-danger) {
  color: var(--sw-danger) !important;
  font-style: normal !important;
}


/* =========================================================================
   207. UNA RIGA CHE PORTA SOLO UN CASSETTO NON OCCUPA POSTO DA CHIUSA
   -------------------------------------------------------------------------
   Nelle tabelle dove una riga puo' aprirsi — i dettagli del bonifico nel
   portafoglio — il markup mette una seconda `<tr>` che contiene soltanto il
   `.collapse`. Da chiusa quel cassetto e' alto zero, ma la cella intorno no:
   la spaziatura generale delle celle e la riga di separazione restano, e in
   mezzo alla tabella compare una fascia vuota. Misurata sul portafoglio a
   1440px: 29px di niente, con `p-0` gia' scritto nel markup — la classe di
   Bootstrap perde contro la regola generale delle celle.

   La riga si riconosce da sola: e' quella che ha per unico figlio utile un
   `.collapse` non aperto. Quando il cassetto e' aperto (`.show`) la cella
   torna normale e il contenuto ha il suo respiro.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] tr:has(> td > .collapse:not(.show)):not(:has(> td > *:not(.collapse))) > td {
  padding: 0 !important;
  border: 0 !important;
}


/* =========================================================================
   208. UN NOME LUNGO SENZA SPAZI NON VIENE TAGLIATO VIA
   -------------------------------------------------------------------------
   `sw-hero-title` e' il titolo grande in cima alle pagine, e spessissimo
   quello che ci finisce dentro non e' una frase ma **un identificatore**: il
   nome di un file caricato, un numero di tracking, un codice ordine, un
   indirizzo email. Nessuno di questi ha spazi, quindi per il browser sono una
   parola sola, e una parola sola non va a capo.

   Misurato sulla scheda di un rapporto corriere, a 390px, titolo
   `poste_fatturazione_2026_08.csv`: la scatola era larga 362px e il testo
   401px. La pagina **non** scorreva in orizzontale — piu' su c'e' un
   `overflow-x: hidden` che la tiene — quindi non c'era nessun segnale che
   qualcosa mancasse: gli ultimi caratteri sparivano e basta. Su un nome di
   file si perdeva l'estensione; su un tracking si perdevano le ultime cifre,
   cioe' proprio quelle che distinguono una spedizione dall'altra.

   `overflow-wrap: anywhere` fa andare a capo dentro la parola, ma **solo**
   quando serve: una frase normale continua a spezzarsi agli spazi come
   prima. Vale anche per il sommario e per il titolo di un pannello, che
   ospitano le stesse cose.
   ========================================================================= */
html body.nedate-ui-standard .sw-hero-title,
html body.nedate-ui-standard .sw-hero-lead,
html body.nedate-ui-standard .sw-panel__title {
  overflow-wrap: anywhere !important;
}


/* =========================================================================
   209. UN PASSO GIA' FATTO E UNO ANCORA DA FARE — `sw-step--todo`
   -------------------------------------------------------------------------
   `sw-step` (sezione 195) sa dire «1 · trova l'ordine, 2 · scegli cosa
   rendere»: e' l'elenco di una procedura, e tutti i passi si somigliano
   perche' nessuno e' ancora successo.

   Ma lo stesso elenco serve anche a raccontare **dove e' arrivata** una cosa
   che sta gia' camminando: un reso chiesto, approvato, ricevuto, chiuso. Li'
   i passi non sono tutti uguali — alcuni sono fatti, gli altri no — e finora
   ogni pagina se lo disegnava da sola. La scheda di un reso, per esempio,
   aveva sei cerchi in fila con sei colori Bootstrap diversi (`warning`,
   `info`, `primary`, `primary`, `secondary`, `success`) e una freccia fra
   l'uno e l'altro: sei colori che non volevano dire sei cose, e su schermo
   stretto la fila andava a capo in mezzo alle frecce.

   Qui il passo da fare resta lo stesso oggetto, solo spento: pallino grigio,
   titolo in grigio. Quello fatto tiene il colore del marchio e mostra la sua
   data. Non serve un colore per passo, serve la differenza fra fatto e non
   fatto.
   ========================================================================= */
html body.nedate-ui-standard .sw-step--todo .sw-step__n {
  background: var(--sw-surface-2, rgba(15, 23, 42, .05)) !important;
  color: var(--sw-muted) !important;
  -webkit-text-fill-color: var(--sw-muted) !important;
}
html body.nedate-ui-standard .sw-step--todo .sw-step__title {
  color: var(--sw-muted) !important;
  font-weight: var(--sw-weight-normal, 400) !important;
}

@media (prefers-color-scheme: dark) {
  html body.nedate-ui-standard[data-theme="dark"] .sw-step--todo .sw-step__n,
  html body.nedate-ui-standard.dark-mode .sw-step--todo .sw-step__n {
    background: rgba(255, 255, 255, .06) !important;
  }
}
html body.nedate-ui-standard[data-theme="dark"] .sw-step--todo .sw-step__n,
html body.nedate-ui-standard.dark-mode .sw-step--todo .sw-step__n {
  background: rgba(255, 255, 255, .06) !important;
}


/* =========================================================================
   210. LA COLONNA DI LETTURA STA IN MEZZO, NON A SINISTRA
   -------------------------------------------------------------------------
   La sezione 130 aveva sistemato la **larghezza** della colonna dei documenti
   legali — 58ch, cioe' 68 caratteri per riga, che e' la misura giusta per
   leggere un testo lungo. Aveva dimenticato dove metterla.

   Misurato su /privacy a 1400px: il contenitore e' largo 1330px, la colonna
   522px, e comincia a 69px. Restavano **800px di niente** sulla destra, con
   tutto il testo schiacciato contro il bordo sinistro. Lo stesso su /termini,
   /cookie, /gdpr, /dpa e su ogni pagina d'azienda che passa dallo stesso
   guscio.

   `margin-inline: auto` la mette in mezzo. La larghezza non cambia: cambia
   solo che l'aria sta di qua e di la' invece che tutta da una parte.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class] .legal-doc[class] :is(.legal-doc__head, .legal-doc__body) {
  margin-inline: auto !important;
}


/* =========================================================================
   211. IL BOTTONE QUIETO CHE E' UNA SCELTA — `.btn-check:checked`
   -------------------------------------------------------------------------
   La sezione 197 ha dato al bottone di servizio la sua faccia «scelto»,
   `sw-btn-quiet--on`, e va benissimo quando a decidere chi e' scelto e' il
   server: una fila di collegamenti, uno dei quali ha la classe in piu'.

   Non basta quando la scelta la fa il dito, senza ricaricare: li' il segno
   di spunta sta in un `<input type="radio">`, e la classe non c'e' nessuno
   che la aggiunga. Bootstrap per questo ha `btn-check`, con la regola
   `.btn-check:checked + .btn`; ma `sw-btn-quiet` dichiara il proprio fondo
   con `!important`, quindi vinceva sempre lui e il bottone premuto restava
   identico agli altri.

   Misurato sul questionario NPS pubblico: undici bottoni da 0 a 10, si
   clicca e **non cambia niente**. Il voto veniva registrato — il `radio`
   funzionava — ma chi rispondeva non aveva modo di sapere quale numero
   avesse scelto, ne' di accorgersi di averlo cambiato.

   Qui la faccia «scelto» arriva anche dall'input, e vale per qualunque fila
   di scelte scritta col modo di Bootstrap.
   ========================================================================= */
html body.nedate-ui-standard .btn-check:checked + .sw-btn-quiet,
html body.nedate-ui-standard .btn-check:active + .sw-btn-quiet {
  background: var(--sw-brand-50, #fff2f2) !important;
  border-color: var(--sw-brand-700, #b5172a) !important;
  color: var(--sw-brand-700, #b5172a) !important;
  -webkit-text-fill-color: var(--sw-brand-700, #b5172a) !important;
  font-weight: 600 !important;
}
/* Il contorno del fuoco da tastiera: senza, chi si muove col tabulatore non
   vede dove si trova, perche' l'input vero e' nascosto. */
html body.nedate-ui-standard .btn-check:focus-visible + .sw-btn-quiet {
  outline: 2px solid var(--sw-brand-600, #d11f38) !important;
  outline-offset: 2px !important;
}

@media (prefers-color-scheme: dark) {
  html body.nedate-ui-standard[data-theme="dark"] .btn-check:checked + .sw-btn-quiet,
  html body.nedate-ui-standard.dark-mode .btn-check:checked + .sw-btn-quiet {
    background: rgba(181, 23, 42, .16) !important;
    border-color: rgba(229, 116, 133, .55) !important;
    color: #f3b8c1 !important;
    -webkit-text-fill-color: #f3b8c1 !important;
  }
}
html body.nedate-ui-standard[data-theme="dark"] .btn-check:checked + .sw-btn-quiet,
html body.nedate-ui-standard.dark-mode .btn-check:checked + .sw-btn-quiet {
  background: rgba(181, 23, 42, .16) !important;
  border-color: rgba(229, 116, 133, .55) !important;
  color: #f3b8c1 !important;
  -webkit-text-fill-color: #f3b8c1 !important;
}


/* =========================================================================
   212. LA NUVOLETTA DI UNA CONVERSAZIONE — `sw-bubble`
   -------------------------------------------------------------------------
   Il sito ha tre posti dove si legge uno scambio di messaggi: la scheda di
   una conversazione dai contatti nel pannello, la richiesta di assistenza che
   il cliente apre dal collegamento pubblico, e la chat dal vivo. Tutti e tre
   se la disegnavano da soli, e in due modi che sono la stessa cosa scritta
   due volte:

     .admin-support-bubble  { max-width: min(92%,720px); border-radius: 18px;
                              padding: 14px 16px; box-shadow: 0 10px 24px rgba(15,23,42,.06) }
     .support-ticket-bubble { max-width: min(92%,720px); border-radius: 18px;
                              padding: 14px 16px; box-shadow: 0 10px 24px rgba(15,23,42,.06) }

   una in `admin-blade-extracted.css`, l'altra in un `<style>` dentro la
   vista pubblica. Identiche riga per riga.

   E tutte e due coloravano la nuvoletta «mia» con `rgba(37,99,235,.08)`,
   cioe' **azzurro**: il colore di Bootstrap, non quello del marchio. Su una
   pagina che il cliente apre dal collegamento nella sua email, i suoi
   messaggi uscivano azzurri su un sito rosso.

   Qui la nuvoletta e' una sola, coi token, e i due modificatori dicono chi
   ha scritto dal punto di vista di **chi legge**: `--mine` per i propri
   messaggi, `--theirs` per quelli dell'altro. Cosi' la stessa coppia serve
   sia al pannello (dove «mio» e' l'operatore) sia alla pagina pubblica (dove
   «mio» e' il cliente).
   ========================================================================= */
html body.nedate-ui-standard .sw-bubble {
  max-width: min(92%, 720px) !important;
  padding: 14px 16px !important;
  border-radius: var(--sw-radius-lg, 18px) !important;
  border: 1px solid var(--sw-line) !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  color: var(--sw-body) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}
html body.nedate-ui-standard .sw-bubble--mine {
  background: var(--sw-brand-50, #fff2f2) !important;
  border-color: color-mix(in srgb, var(--sw-brand-600, #d11f38) 22%, transparent) !important;
}
html body.nedate-ui-standard .sw-bubble__who {
  display: block !important;
  margin-bottom: .25rem !important;
  color: var(--sw-ink) !important;
  font-size: .82rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard .sw-bubble__when {
  display: block !important;
  margin-top: .5rem !important;
  color: var(--sw-muted) !important;
  font-size: .78rem !important;
}

@media (prefers-color-scheme: dark) {
  html body.nedate-ui-standard[data-theme="dark"] .sw-bubble,
  html body.nedate-ui-standard.dark-mode .sw-bubble {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .12) !important;
  }
  html body.nedate-ui-standard[data-theme="dark"] .sw-bubble--mine,
  html body.nedate-ui-standard.dark-mode .sw-bubble--mine {
    background: rgba(181, 23, 42, .16) !important;
    border-color: rgba(229, 116, 133, .38) !important;
  }
}
html body.nedate-ui-standard[data-theme="dark"] .sw-bubble,
html body.nedate-ui-standard.dark-mode .sw-bubble {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
html body.nedate-ui-standard[data-theme="dark"] .sw-bubble--mine,
html body.nedate-ui-standard.dark-mode .sw-bubble--mine {
  background: rgba(181, 23, 42, .16) !important;
  border-color: rgba(229, 116, 133, .38) !important;
}


/* =========================================================================
   213. DENTRO IL MARCHIO DI QUALCUN ALTRO, ANCHE I COLLEGAMENTI SONO SUOI
   -------------------------------------------------------------------------
   La sezione 185 ha dato a `sw-brandable` il colore del negozio e l'ha
   portato dove conta di piu': il bottone principale, la pastiglia in cima al
   titolo, la parola evidenziata. Restava fuori la cosa piu' banale — **un
   collegamento normale**.

   Misurato sulla pagina di stato di un reso in bianca, con un negozio di
   prova in verde: pastiglia verde, passi verdi, bottone verde, e in fondo
   l'indirizzo dell'assistenza **rosso**, perche' il rosso e' il nostro. Su
   una pagina che deve sembrare del negozio, il nostro colore non ci va
   nemmeno in un collegamento di due parole.

   Restano fuori i bottoni e le pastiglie, che hanno gia' il loro colore.
   ========================================================================= */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable a:not(.btn):not(.sw-tag):not(.sw-state):not(.sw-iconbtn) {
  color: var(--sw-brand-custom) !important;
  -webkit-text-fill-color: var(--sw-brand-custom) !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable a:not(.btn):not(.sw-tag):not(.sw-state):not(.sw-iconbtn):hover {
  filter: brightness(.9);
}

/* Dentro una pagina in bianca il bottone scelto prende il colore del negozio,
   non il nostro. La sezione 211 qui sopra dichiara `--sw-brand-50` e
   `--sw-brand-700`, che sono i rossi di SpedireWeb: misurato sul modulo di
   reso pubblico di un negozio in verde, il modo di riconsegna scelto usciva
   rosso in mezzo a tutto il resto verde. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable .btn-check:checked + .sw-btn-quiet,
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable .btn-check:active + .sw-btn-quiet {
  background: color-mix(in srgb, var(--sw-brand-custom) 10%, transparent) !important;
  border-color: var(--sw-brand-custom) !important;
  color: var(--sw-brand-custom) !important;
  -webkit-text-fill-color: var(--sw-brand-custom) !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class] .sw-brandable .btn-check:focus-visible + .sw-btn-quiet {
  outline-color: var(--sw-brand-custom) !important;
}

/* Admin nested menu: labels are always left-anchored; chevrons stay right. */
html body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .sb-flyout) .sb-subsection-toggle {
  justify-content: flex-start !important;
  text-align: left !important;
}
html body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .sb-flyout) .sb-subsection-toggle > span {
  flex: 1 1 auto !important;
  min-width: 0;
  text-align: left !important;
}
html body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .sb-flyout) .sb-subsection-toggle > i {
  margin-left: auto !important;
  flex: 0 0 auto;
}
html body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb) .sb-subsection-items .sb-sub-link,
html body.nedate-ui-standard .sb-flyout .sb-subsection-items a {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* SEO admin settings: shared form sizing and social preview. */
html body.nedate-ui-standard .seo-textarea-lg {
  min-height: 110px !important;
}
html body.nedate-ui-standard .seo-textarea-md {
  min-height: 100px !important;
}
html body.nedate-ui-standard .seo-og-preview {
  width: 160px;
  max-height: 90px;
  object-fit: cover;
  border-radius: var(--sw-radius-md);
}

/* =========================================================================
   214. DUE REGOLE CHE STAVANO NEL LAYOUT
   -------------------------------------------------------------------------
   Erano due `<style>` scritti dentro ai file del layout, quindi partivano
   dentro all'HTML di ogni pagina del sito:

   - `body { padding-top: 46px }`, per fare posto alla barra che compare
     quando lo staff entra nel pannello di un cliente. Accanto c'era anche
     `#impersonation-bar + * { }`, una regola vuota. Qui la scriviamo legata
     alla barra: se la barra non c'e', il posto non si lascia.
   - `.sb-flyout { max-height: ... }`, l'altezza del pannellino che esce dal
     menu laterale quando e' chiuso.
   ========================================================================= */
html body.nedate-ui-standard:has(#impersonation-bar) {
  padding-top: 46px !important;
}
html body.nedate-ui-standard .sb-flyout {
  max-height: calc(100vh - 60px) !important;
  overflow-y: auto !important;
}

/* =========================================================================
   215. LA LINEA DEL TEMPO DI UNA SPEDIZIONE — `sw-progress`
   -------------------------------------------------------------------------
   Il sito ha tre posti dove si disegna «a che punto e' il pacco»: la scheda
   della spedizione nell'area riservata, la pagina di tracciamento pubblica e
   quella col marchio del commerciante. Tutti e tre se la disegnavano da soli,
   con tre nomi diversi — `status-timeline`, `tracking-public-timeline`,
   `timeline` — e nessuno dei tre coi token.

   Quello della scheda spedizione scriveva i colori a mano:

     .timeline-dot         { background:#fff; box-shadow: inset 0 0 0 8px #f5f7fb }
     .timeline-step.active .timeline-dot { box-shadow: inset 0 0 0 8px #ffe0dd }

   In tema scuro restavano **cerchi bianchi** e un anello rosa pallido sul
   fondo blu notte, perche' quei valori non sanno che tema c'e'.

   Qui il passo e' uno solo, coi token, e dice tre cose col colore: fatto
   (`is-done`), adesso (`is-now`), ancora da fare (niente). Su schermo stretto
   scorre di lato invece di schiacciare le parole una sull'altra.
   ========================================================================= */
html body.nedate-ui-standard .sw-progress {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  align-items: start !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: .25rem 0 !important;
  list-style: none !important;
}
html body.nedate-ui-standard .sw-progress__step {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  gap: .55rem !important;
  min-width: 0 !important;
  padding: 0 .25rem !important;
  text-align: center !important;
  color: var(--sw-muted) !important;
  font-size: .82rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.25 !important;
}
/* Il filo va al passo precedente, quindi lo disegna il passo che segue: cosi'
   l'ultimo non si porta dietro una coda che finisce nel vuoto. */
html body.nedate-ui-standard .sw-progress__step + .sw-progress__step::before {
  content: "" !important;
  position: absolute !important;
  top: 19px !important;
  right: 50% !important;
  left: -50% !important;
  margin: 0 22px !important;
  border-top: 2px dashed var(--sw-line) !important;
}
html body.nedate-ui-standard .sw-progress__step.is-done::before,
html body.nedate-ui-standard .sw-progress__step.is-now::before {
  border-top-style: solid !important;
  border-top-color: var(--sw-brand-600) !important;
}
html body.nedate-ui-standard .sw-progress__dot {
  position: relative !important;
  z-index: 1 !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid var(--sw-line) !important;
  background: var(--sw-surface) !important;
  color: var(--sw-muted) !important;
  font-size: .95rem !important;
}
html body.nedate-ui-standard .sw-progress__step.is-done .sw-progress__dot {
  border-color: color-mix(in srgb, var(--sw-brand-600) 38%, transparent) !important;
  background: var(--sw-brand-50) !important;
  color: var(--sw-brand-700) !important;
}
html body.nedate-ui-standard .sw-progress__step.is-now .sw-progress__dot {
  border-color: var(--sw-brand-600) !important;
  background: var(--sw-brand-600) !important;
  color: #fff !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sw-brand-600) 16%, transparent) !important;
}
html body.nedate-ui-standard .sw-progress__step.is-done,
html body.nedate-ui-standard .sw-progress__step.is-now {
  color: var(--sw-ink) !important;
}
html body.nedate-ui-standard .sw-progress__label { display: block !important; }

/* Su tema scuro il fondo del pallino «fatto» e' troppo chiaro: il token
   `--sw-brand-50` li' e' quasi bianco. */
html body.nedate-ui-standard[data-theme="dark"] .sw-progress__step.is-done .sw-progress__dot,
html body.nedate-ui-standard.dark-mode .sw-progress__step.is-done .sw-progress__dot {
  background: color-mix(in srgb, var(--sw-brand-600) 22%, transparent) !important;
  color: #fbbfc6 !important;
}

/* Sotto i 768px cinque parole in fila non ci stanno: si scorre. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-progress {
    grid-auto-columns: minmax(92px, 1fr) !important;
    overflow-x: auto !important;
    padding-bottom: .5rem !important;
    scrollbar-width: thin !important;
  }
  html body.nedate-ui-standard .sw-progress__step { font-size: .76rem !important; }
}

@media print {
  html body.nedate-ui-standard .sw-progress { overflow: visible !important; }
}

/* La barra delle scorciatoie sul telefono: sette voci con la parola intera
   andavano a capo quattro volte e si mangiavano un terzo dello schermo. Qui
   stanno su una riga sola che scorre di lato, come la linea del tempo: la
   barra resta alta quanto un pulsante, e le voci ci sono tutte. */
html body.nedate-ui-standard .shipment-actions-bar {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
html body.nedate-ui-standard .shipment-actions-bar::-webkit-scrollbar { display: none !important; }
html body.nedate-ui-standard .shipment-actions-bar .btn {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  font-size: .8rem !important;
  white-space: nowrap !important;
}

/* =========================================================================
   216. IL CAMPO DI UN CODICE CORTO — `sw-codefield`
   -------------------------------------------------------------------------
   Tre punti del sito chiedono di ricopiare un codice breve arrivato altrove:
   il PIN che apre la spedizione di chi ha spedito senza account, il codice
   della verifica in due passaggi al momento dell'accesso, e quello che la
   conferma al momento di attivarla. Tutti e tre lo chiedevano dentro a un
   campo di testo come gli altri: carattere proporzionale, allineato a
   sinistra, largo quanto la riga.

   Con un carattere proporzionale «111111» e' largo la meta' di «000000», e
   mentre si scrive il testo balla. A spaziatura fissa no, e le cifre si
   contano a colpo d'occhio.

   Come per `sw-code-area`, non basta scrivere la regola: su un
   `.form-control` dentro a `.sw-forms` si accavallano piu' di venti regole, e
   quella che vinceva qui e' la 76 (riga 8560), che a parita' di classi e di
   id porta un elemento in piu' nel `:not(textarea)`. Percio' servono due
   cose insieme: **l'esclusione dentro la 76** — accanto a quella che c'era
   gia' per la textarea — e questa regola, scritta con la stessa armatura.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(input, .form-control)[class].sw-codefield {
  font-family: var(--sw-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: .38em !important;
  /* L'ultima lettera si porta dietro il suo spazio: senza questo il testo
     sembra spostato a sinistra dentro al campo. */
  text-indent: .38em !important;
  text-align: center !important;
  line-height: 1.2 !important;
  color: var(--sw-ink) !important;
}

/* Il campo del codice **non** va dentro a `form-floating`: l'etichetta
   flottante e' fatta per stare in mezzo alla casella finche' il campo e'
   vuoto, e sopra a sei cifre grandi finirebbe addosso a quello che si
   scrive. Qui la didascalia sta sopra, come una `sw-metric__label`, e la
   casella fa solo la casella. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] :is(input, .form-control)[class].sw-codefield {
  height: 4.1rem !important;
  min-height: 4.1rem !important;
  padding: .7rem 1rem !important;
}

/* =========================================================================
   217. LA VOCE DEL MENU LATERALE SU CUI SI STA — IN TUTTI E DUE I TEMI
   -------------------------------------------------------------------------
   La colonna del menu e' scura **sempre**: `rgb(7, 14, 28)` in chiaro e in
   scuro, misurato. Non cambia col tema, e allora non deve cambiare nemmeno
   la pastiglia che dice su che pagina si sta.

   Invece in tema scuro `nedate-design-system.css` (riga 5766) le dava lo
   stesso trattamento del passaggio del mouse:

     background: color-mix(in srgb, var(--nd-final-primary) 22%, transparent)

   cioe' un velo del 22% sul fondo gia' scuro. Misurato:
   `rgba(251, 108, 117, .22)` contro `rgb(7, 14, 28)`. Due conseguenze:
   la voce su cui si sta quasi non si distingue dalle altre, e quando il
   mouse passa su una voce qualsiasi quella diventa **identica** a quella
   selezionata.

   Qui la pastiglia resta piena, del colore del marchio, come in chiaro; e il
   passaggio del mouse resta un velo leggero, che con una pastiglia piena non
   si confonde.
   ========================================================================= */
html body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:is(.active, [aria-current="page"]),
html[data-theme="dark"] body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:is(.active, [aria-current="page"]),
html[data-bs-theme="dark"] body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:is(.active, [aria-current="page"]),
body.dark-mode.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:is(.active, [aria-current="page"]) {
  background: var(--sw-brand-600) !important;
  color: #fff !important;
}
html body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:is(.active, [aria-current="page"]) :is(i, svg, .main-icon, .sb-text),
html[data-theme="dark"] body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:is(.active, [aria-current="page"]) :is(i, svg, .main-icon, .sb-text),
body.dark-mode.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:is(.active, [aria-current="page"]) :is(i, svg, .main-icon, .sb-text) {
  color: #fff !important;
}

/* Il passaggio del mouse su una voce **non** selezionata: un velo, non la
   pastiglia piena. Cosi' le due cose restano due cose. */
html body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:not(.active):not([aria-current="page"]):hover,
html[data-theme="dark"] body.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:not(.active):not([aria-current="page"]):hover,
body.dark-mode.nedate-ui-standard :is(.adm-sidebar, .drawer-sb, .nedate-sidebar) :is(.sb-link, .sb-sub-link)[class][class][class]:not(.active):not([aria-current="page"]):hover {
  background: rgba(255, 255, 255, .07) !important;
}

/* Da colonna stretta le didascalie dei gruppi spariscono: nel menu utente
   avevano `display: none`, in quello dell'amministrazione restavano a
   larghezza zero. Stessa cosa, detta una volta sola. */
html body.nedate-ui-standard .adm-sidebar.collapsed .sb-section-cap {
  display: none !important;
}

/* =========================================================================
   218. IL GRUPPO DI CAMPI CHE COMPARE SOLO QUANDO SERVE — `stock-field-panel`
   -------------------------------------------------------------------------
   I tre gruppi di campi dello svincolo — indirizzo, citta', punto di ritiro —
   compaiono uno alla volta a seconda di quello che si sceglie, e a riposo
   stanno nascosti con `d-none`.

   Vestirli con `sw-listrow` sembrava la cosa giusta e invece li ha accesi
   tutti e tre insieme: quel mattone porta `display: block !important` con una
   specificita' piu' alta di `.d-none`, e un'utility che dice «nascondi» non
   puo' perdere contro l'aspetto di un componente.

   `.d-none` generico non si puo' rinforzare — la sezione 28 spiega perche':
   il motivo `.d-none .d-lg-flex` sparirebbe dal desktop. Quindi qui il
   riquadro si disegna **senza** dire come si mostra: il come lo decide
   `d-none`, o il browser.
   ========================================================================= */
html body.nedate-ui-standard .stock-field-panel {
  padding: 1.1rem 1.25rem !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-lg, 18px) !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
}

/* =========================================================================
   219. IL MENU CHE ESCE DALLA COLONNA STRETTA — `sb-flyout`
   -------------------------------------------------------------------------
   Con la colonna del menu ridotta a icone, cliccare un gruppo fa uscire di
   lato un pannellino con le sue voci. In tema chiaro quel pannellino era
   **bianco** — `blade-views.css` riga 1777 — mentre le voci dentro tenevano
   i colori della colonna, che e' scura. Misurato: fondo `rgb(255,255,255)`,
   testo delle sezioni `rgba(229,238,250,.62)`. Bianco su bianco: le voci
   c'erano e non si leggevano.

   Il guaio nasce dal fatto che la regola chiara scuriva solo le `a`, e le
   sezioni sono `button.sb-subsection-toggle`, che restavano fuori.

   Da notare: il pannellino **non sta dentro** `.adm-sidebar` quando e'
   aperto — finisce appeso al `<body>` — quindi la regola non puo' chiedere
   quell'antenato, o non aggancia niente.

   Qui il pannellino torna a essere quello che e': un pezzo della colonna.
   La colonna e' scura in tutti e due i temi — `rgb(7,14,28)`, misurato —
   quindi anche il suo pannellino lo e', e non serve piu' una versione chiara
   e una scura.
   ========================================================================= */
html body.nedate-ui-standard[class][class] .sb-flyout,
html[data-theme="light"] body.nedate-ui-standard[class][class] .sb-flyout,
html[data-theme="dark"] body.nedate-ui-standard[class][class] .sb-flyout {
  background: var(--sw-navy-850) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: var(--sw-radius-md) !important;
  box-shadow: var(--sw-shadow-lg) !important;
}
html body.nedate-ui-standard[class][class] .sb-flyout .sb-flyout-header,
html[data-theme="light"] body.nedate-ui-standard[class][class] .sb-flyout .sb-flyout-header {
  color: var(--sw-on-dark) !important;
  border-bottom-color: rgba(255, 255, 255, .1) !important;
}
/* Le voci: le `a` c'erano gia', i `button` delle sezioni no — ed erano
   proprio quelli che sparivano. */
html body.nedate-ui-standard[class][class] .sb-flyout :is(a, .sb-sub-link, .sb-subsection-toggle),
html[data-theme="light"] body.nedate-ui-standard[class][class] .sb-flyout :is(a, .sb-sub-link, .sb-subsection-toggle) {
  color: var(--sw-on-dark-body, rgba(229, 238, 250, .8)) !important;
  background: transparent !important;
}
html body.nedate-ui-standard[class][class] .sb-flyout :is(a, .sb-sub-link, .sb-subsection-toggle):hover,
html[data-theme="light"] body.nedate-ui-standard[class][class] .sb-flyout :is(a, .sb-sub-link, .sb-subsection-toggle):hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
}
html body.nedate-ui-standard[class][class] .sb-flyout :is(a, .sb-sub-link, .sb-subsection-toggle):is(.active, [aria-current="page"]),
html[data-theme="light"] body.nedate-ui-standard[class][class] .sb-flyout :is(a, .sb-sub-link, .sb-subsection-toggle):is(.active, [aria-current="page"]) {
  color: #fff !important;
  background: var(--sw-brand-600) !important;
}

/* =========================================================================
   220. LA TEXTAREA: ETICHETTA SEMPRE IN ALTO, CON LA SUA FASCIA
   -------------------------------------------------------------------------
   Misurato sulla scheda di un ticket in amministrazione: due caselle
   affiancate, «Risposta del corriere» con dentro del testo e «Note di
   chiusura» ancora vuota. La prima aveva l'etichetta a 11px in alto, la
   seconda a 15px a 26px dal bordo. Stesso componente, due aspetti — e la
   seconda, piu' grande e piu' in basso, sembrava un'altra cosa.

   Il motivo «etichetta-guida» della sezione 75 e' giusto per un campo alto
   58px, dove la riga di testo e' una sola e l'etichetta puo' fare da testo
   guida. In una casella da 130px non lo e': l'etichetta galleggia a meta'
   del nulla e, appena si scrive, salta via. La textarea e' uscita da quel
   motivo — la sua etichetta sta in alto sempre, vuota o piena, come se il
   campo avesse gia' un testo guida. A farla uscire e' la sezione 75 stessa,
   che ora nomina solo `input`; da qui in giu' c'e' la conseguenza.

   La conseguenza e' che il testo, scorrendo, le passa sotto. Serve una
   striscia opaca larga quanto il campo, alta quanto il rientro sopra la
   prima riga: sotto sta il testo che scorre, sopra l'etichetta ferma.

   Tre cose non ovvie, tutte e tre misurate:

   1. la striscia sta sul guscio (`.form-floating::after`) e non
      sull'etichetta. L'etichetta ha `overflow: hidden` — le serve per non
      sbordare — e li' dentro la striscia veniva tagliata a 22px invece dei
      27 che deve coprire;

   2. il colore non e' scritto, e' un token, e i token sono due: il fondo del
      campo, misurato, non e' uno solo. Nelle pagine utente e pubbliche vince
      `--nd-final-field-bg` (#0b1220 al buio), in quelle di amministrazione
      vince `--sw-field-bg` (#0e1a2c). La striscia legge lo stesso valore che
      legge il campo sotto di lei, cosi' resta invisibile in tutte e due senza
      cambiare il colore di nessun campo;

   3. il tratto alto della cornice lo disegna la striscia, e il campo lo
      spegne. Sembrava piu' semplice rientrare di un pixel e lasciare la
      cornice al campo, ma la casella cade spesso su coordinate frazionarie
      — 455,25px misurati — e il taglio del testo e il bordo del riempimento
      non arrotondavano allo stesso pixel: restava un capello di testo sul
      filo, che scorrendo una casella lunga si vedeva. Cornice e riempimento
      della striscia invece sono lo stesso riquadro, e fra loro un buco non
      ci puo' essere. Il colore del tratto segue lo stato del campo con il
      motivo della sezione 33: il token si ridichiara sul guscio.
   ========================================================================= */
html body.nedate-ui-standard {
  /* Quanto e' alto il rientro sopra il testo della textarea: lo leggono il
     campo e la fascia, cosi' non possono scostarsi. */
  --sw-textarea-pad-top: 26px;
  /* Il fondo della fascia: lo stesso del campo, letto nello stesso ordine. */
  --sw-band-bg: var(--nd-final-field-bg, var(--sw-field-bg, var(--sw-surface, #ffffff)));
}
html body.nedate-ui-standard:is(.nedate-admin-ui, .nedate-admin-standard) {
  --sw-band-bg: var(--sw-field-bg, var(--sw-surface, #ffffff));
}

/* Il colore del tratto alto, nei tre stati del campo. La fascia e' sorella
   del campo, non figlia: i token che il campo ridichiara su di se' non le
   arriverebbero, per questo stanno sul guscio. */
html body.nedate-ui-standard[class][class][class][class] .form-floating:has(> textarea.form-control) {
  --sw-band-border: var(--sw-field-border);
}
html body.nedate-ui-standard[class][class][class][class] .form-floating:has(> textarea.form-control:focus) {
  --sw-band-border: var(--sw-brand-600);
}
html body.nedate-ui-standard[class][class][class][class] .form-floating:has(> textarea.form-control.is-invalid),
html body.nedate-ui-standard[class][class][class][class] .form-floating:has(> textarea.form-control[aria-invalid="true"]) {
  --sw-band-border: var(--sw-danger);
}

/* Il guscio diventa il riferimento dell'impilamento: senza, i tre livelli —
   campo, fascia, etichetta — si ordinerebbero rispetto alla pagina invece
   che fra loro. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .form-floating[class][class][class]:has(> textarea.form-control) {
  position: relative !important;
  isolation: isolate !important;
}

/* Il rientro alto del campo diventa il token, e il tratto alto della cornice
   passa alla fascia. Sono le due meta' dello stesso patto: se una delle due
   regole non si applica — `:has()` non supportato — non si applica nemmeno
   l'altra, e il campo torna com'era. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .form-floating[class][class][class]:has(> textarea.form-control) > textarea.form-control:not(#tos_text) {
  padding-top: var(--sw-textarea-pad-top, 26px) !important;
  border-top-color: transparent !important;
}

/* La fascia. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .form-floating[class][class][class]:has(> textarea.form-control)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: calc(var(--sw-textarea-pad-top, 26px) + var(--sw-field-edge, 1px)) !important;
  border: var(--sw-field-edge, 1px) solid transparent !important;
  border-top-color: var(--sw-band-border, var(--sw-field-border)) !important;
  border-bottom: 0 !important;
  background-clip: padding-box !important;
  background-color: var(--sw-band-bg) !important;
  background-image: none !important;
  /* Lo stesso raggio del campo: avendo la stessa cornice di un pixel,
     l'angolo interno viene da se' uguale al suo. */
  border-radius: var(--sw-field-radius, 5px) var(--sw-field-radius, 5px) 0 0 !important;
  pointer-events: none !important;
  transform: none !important;
}

/* L'etichetta sopra la fascia. Il resto della sua scatola non si tocca: le
   misure restano quelle di ogni altro campo, se no scenderebbe di due pixel
   rispetto alle etichette accanto. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .form-floating[class][class][class]:has(> textarea.form-control) > label {
  z-index: 2 !important;
  background-color: transparent !important;
}

/* =========================================================================
   221. LA TENDINA DELLE AZIONI — UN MENU SOLO PER TUTTO IL SITO
   -------------------------------------------------------------------------
   Misurato sulla tendina «Dettagli / Modifica / Elimina» di /admin/users, che
   e' la stessa di altre quarantacinque pagine (`dropdown-menu-compact`):

   1. **le prime due voci erano scritte a macchina.** Non per scelta: la
      tendina sta dentro `<td class="text-end">`, e in `theme-waybill.css:91`
      c'e' una regola — «Dati = mono tabulare» — che elenca `td.text-end` e
      `th.text-end` accanto a `code`, `.amount`, `.price`. L'intenzione erano
      gli importi; il bersaglio e' **ogni cella allineata a destra**, e tutto
      quello che ci sta dentro eredita. Le colonne delle azioni sono allineate
      a destra, quindi i menu uscivano in «IBM Plex Mono»;

   2. **la terza voce no**, perche' e' un `<button>` e non eredita il carattere
      del documento. Nello stesso menu, «Dettagli» e «Modifica» in mono a peso
      400 e «Elimina» in sans a peso 600;

   3. **e non era nemmeno allineata come loro**: da `<button>` si prendeva
      `display: inline-flex` e `justify-content: center`, cioe' stava in mezzo
      alla riga, con raggio 0 contro gli 8px delle altre due;

   4. **il filetto separatore aveva 21px di margine sopra e sotto**, dentro un
      menu che di rientro proprio ne ha 5. Fra «Modifica» ed «Elimina» si
      apriva un buco piu' alto di una voce.

   Qui la tendina diventa un componente: stesso carattere, stessa riga, stessi
   stati, che la voce sia un collegamento, un bottone o un testo. Vale per
   tutte — le azioni di riga, i menu della barra in alto, i filtri — perche'
   il selettore e' `.dropdown-menu`, non una classe di pagina.

   Il rientro del menu si ferma dove una pagina ne ha chiesto uno suo
   (`p-0`, `p-2`, `p-3`): quelle tendine hanno dentro schede intere, non voci,
   e il rientro fa parte del loro disegno.
   ========================================================================= */
html body.nedate-ui-standard {
  /* Le due misure proprie della tendina. La voce non e' un testo piccolo
     qualunque: `--sw-text-sm` vale 15px, che in un menu di azioni e' la
     misura di un paragrafo. */
  --sw-menu-fs: 13px;
  --sw-danger-soft: rgba(200, 30, 50, .08);
}
html[data-theme="dark"] body.nedate-ui-standard,
html body.nedate-ui-standard:is(.dark-mode, .dark, .theme-dark) {
  --sw-danger-soft: rgba(251, 113, 133, .14);
}

html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu {
  font-family: var(--sw-font-body, "IBM Plex Sans", system-ui, sans-serif) !important;
  font-variant-numeric: normal !important;
  letter-spacing: normal !important;
  background-color: var(--sw-surface) !important;
  color: var(--sw-body) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-md, 14px) !important;
  box-shadow: var(--sw-shadow-md) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu:not([class*=" p-"]) {
  padding: 6px !important;
}

/* La voce: una riga sola, qualunque cosa sia. `width` e `justify-content`
   servono ai `<button>`, che senza tornano al centro. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu :is(.dropdown-item, .dropdown-item-text) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .5rem !important;
  width: 100% !important;
  text-align: left !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  font-size: var(--sw-menu-fs, 13px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  color: var(--sw-body) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: var(--sw-radius-xs, 8px) !important;
  padding: 8px 10px !important;
  transition: background-color .12s ease, color .12s ease !important;
}

/* Il glifo ha una colonna sua: senza larghezza fissa le scritte partivano da
   punti diversi a seconda di quanto e' larga l'icona. Il margine delle
   utilita' (`me-2`) qui e' di troppo — lo spazio lo fa gia' il `gap`. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-item > :is(i, .bi, svg) {
  flex: 0 0 auto !important;
  width: 1rem !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 1em !important;
  opacity: .85 !important;
}

/* Gli stati. Il passaggio del dito e il fuoco della tastiera si vedono
   uguali: chi naviga con il tasto di tabulazione vede quello che vede chi
   usa il mouse. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-item:is(:hover, :focus, :focus-visible):not(.disabled):not(:disabled) {
  background-color: var(--sw-surface-2) !important;
  color: var(--sw-ink, var(--sw-body)) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-item:is(.active, [aria-current="page"], [aria-selected="true"]) {
  background-color: var(--sw-brand-600) !important;
  color: #fff !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-item:is(.active, [aria-current="page"], [aria-selected="true"]) > :is(i, .bi, svg) {
  color: #fff !important;
  opacity: 1 !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-item:is(.disabled, :disabled) {
  color: var(--sw-muted) !important;
  opacity: .65 !important;
  pointer-events: none !important;
  background-color: transparent !important;
}

/* La voce che distrugge qualcosa resta rossa, ma non cambia ne' peso ne'
   allineamento rispetto alle sorelle: a distinguerla basta il colore. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-item:is(.text-danger, .dropdown-item--danger) {
  color: var(--sw-danger) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-item:is(.text-danger, .dropdown-item--danger):is(:hover, :focus, :focus-visible) {
  background-color: var(--sw-danger-soft, rgba(200, 30, 50, .08)) !important;
  color: var(--sw-danger) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-item.text-muted {
  color: var(--sw-muted) !important;
}

/* Il filetto: un pelo di aria sopra e sotto, non un piano intero. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-divider {
  margin: 6px 4px !important;
  border-top: 1px solid var(--sw-line) !important;
  opacity: 1 !important;
}

/* La testatina di un gruppo di voci: e' l'occhiello che il sito usa
   dappertutto, non un titolo. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .dropdown-menu .dropdown-header {
  font-family: inherit !important;
  font-size: var(--sw-label-fs, 11px) !important;
  font-weight: var(--sw-label-weight, 600) !important;
  letter-spacing: .44px !important;
  text-transform: uppercase !important;
  color: var(--sw-muted) !important;
  padding: 8px 10px 4px !important;
}

/* =========================================================================
   222. LA FINESTRA — UNA SOLA, NON TRE FAMIGLIE E QUATTRO ECCEZIONI
   -------------------------------------------------------------------------
   Contate aprendo a forza tutte le finestre di venticinque pagine rese con
   dati inventati: **venticinque finestre, otto aspetti diversi**. Il titolo e
   il rientro del corpo erano gli unici valori uguali dappertutto. Il resto:

   - **raggio**: 10px in amministrazione, 18px nell'area cliente, 0 su
     profilo e abbonamento;
   - **ombra**: tre — `rgba(11,25,55,.067) 0 14…`, `rgba(12,23,41,.06) 0 8px…`
     e quella predefinita di Bootstrap, `rgba(0,0,0,.15) 0 7px 14px`, che
     significa «qui nessuno l'ha mai toccata»;
   - **cornice**: 0 quasi ovunque, 1px in una;
   - **testata**: fondo bianco in alcune, `rgb(255,245,245)` — un rosa —
     nelle quattordici dell'amministrazione, `#f8f9fc` in due; e il filetto
     sotto c'era in cinque e mancava nelle altre venti;
   - **piede**: tre rientri diversi, piu' due finestre senza piede.

   Qui la finestra diventa un componente come la scheda: superficie, cornice,
   raggio e ombra dai token, testata e piede separati da un filetto solo,
   rientri uguali. A schermo intero il raggio resta zero, che e' l'unico caso
   in cui serve.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .modal .modal-content {
  background-color: var(--sw-surface) !important;
  background-image: none !important;
  color: var(--sw-body) !important;
  border: 1px solid var(--sw-line) !important;
  box-shadow: var(--sw-shadow-lg) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .modal .modal-dialog:not([class*="fullscreen"]) > .modal-content {
  border-radius: var(--sw-radius-lg, 18px) !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .modal .modal-dialog[class*="fullscreen"] > .modal-content {
  border-radius: 0 !important;
  border: 0 !important;
}

/* La testata: nessun fondo proprio — il rosa dell'amministrazione dava alla
   stessa finestra due pesi diversi a seconda di dove la si apriva — e un
   filetto solo, quello. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .modal .modal-header {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  gap: .75rem !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .modal .modal-body {
  padding: 20px !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .modal .modal-footer {
  background-color: transparent !important;
  background-image: none !important;
  border-top: 1px solid var(--sw-line) !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  gap: .5rem !important;
}
/* Bootstrap mette un margine a ogni figlio del piede e poi lo compensa sul
   piede stesso: con il `gap` diventano due spaziature sommate. */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .modal .modal-footer > * {
  margin: 0 !important;
}

/* =========================================================================
   223. LA ROTELLA DENTRO UN BOTTONE
   -------------------------------------------------------------------------
   Al primo clic il bottone si spegne, la scritta sparisce e compare la rotella
   (`public/js/sw-submit-lock.js`). Su /accedi la scritta spariva e basta: la
   rotella c'era — 14px, visibile, animata — ma **rossa su un bottone rosso**.
   Misurato: `rgb(217, 35, 54)` sul cerchio e `rgb(217, 35, 54)` sul fondo,
   mentre il testo del bottone e' bianco.

   Il rosso glielo dava `theme-waybill.css`, che colora ogni `.spinner-border`
   con il rosso del timbro: giusto per una rotella che sta per conto suo su una
   superficie chiara, sbagliato dentro un bottone pieno. Li' la rotella prende
   il colore del bottone, qualunque esso sia — cosi' vale anche per i bottoni
   chiari, dove diventa scura da se'.
   ========================================================================= */
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .btn :is(.spinner-border, .spinner-grow) {
  color: inherit !important;
  border-color: currentColor !important;
  /* Il vuoto che fa sembrare il cerchio in movimento: e' un bordo trasparente,
     e va rimesso dopo aver riscritto `border-color` tutto insieme. */
  border-right-color: transparent !important;
}
html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .btn .spinner-grow {
  background-color: currentColor !important;
  border: 0 !important;
}

/* =========================================================================
   224. /SPEDIZIONI — IL DISEGNINO IN CIMA SPARISCE SUL TELEFONO
   -------------------------------------------------------------------------
   In cima alla pagina c'e' un disegno — un pacco con lo spillo e la
   traiettoria punteggiata — accanto a «Crea una nuova spedizione». Sul
   computer e' largo 210x120 e ha il suo spazio; sotto i 992px si rimpicciolisce
   a 88x74 e si schiaccia a destra del titolo, che li' ha gia' poco respiro:
   misurato, a 390px il titolo arriva a 279 e il disegno comincia a 291, dodici
   pixel dopo. Un ornamento che ruba larghezza a una pagina in cui si deve
   scrivere.

   Sparisce del tutto, e con lui lo spazio che occupava: `display: none` e non
   `visibility`, cosi' il titolo si prende tutta la riga.
   ========================================================================= */
@media (max-width: 959.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class] .shipping-page-wrapper .shipping-hero-visual {
    display: none !important;
  }
}


/* =========================================================================
   112. /SPEDIZIONI — CARD MOBILE DAVVERO FULL WIDTH
   -------------------------------------------------------------------------
   Il contenuto della pagina conserva il suo gutter, ma le superfici bianche
   dei passaggi arrivano ai due bordi del viewport. Il padding resta dentro
   la card, quindi campi e testi non finiscono contro lo schermo.
   ========================================================================= */
@media (max-width: 767.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class]
  .shipping-page-wrapper[class][class] :is(
    #shippingForm > .card,
    .card.sender-box,
    .card.receiver-box,
    .card.pickup-box
  ) {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: var(--sw-surface) !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class]
  .shipping-page-wrapper[class][class] :is(#shippingForm, .shipping-card, .shipping-card > .container, .sender-box-full, .receiver-box-full, .pickup-box-full) {
    overflow: visible !important;
  }
}


/* /spedizioni mobile: piccolo stacco grigio prima del footer. */
@media (max-width: 767.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:has(.shipping-page-wrapper)
  .shipping-page-wrapper {
    padding-bottom: 16px !important;
    background-color: var(--sw-surface-2) !important;
  }

  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard[class][class][class][class][class][class][class][class]:has(.shipping-page-wrapper)
  footer.nedate-site-footer {
    margin-top: 0 !important;
  }
}

/* =========================================================================
   225. LA RIGA CHE SI SCEGLIE — `sw-listrow--pick`
   -------------------------------------------------------------------------
   La card «Metodo di pagamento» elenca i gateway come righe con un pallino a
   sinistra. Erano `border rounded-3 p-3` con lo stato scelto fatto da due
   utility di Bootstrap: `border-primary bg-primary-subtle`, cioe' **l'azzurro
   di Bootstrap** — non il rosso di questo sito. Su una pagina che e' tutta
   rossa e blu-notte, la riga scelta diventava azzurra.

   Qui la riga e' un mattone: `sw-listrow` con la variante `--pick`, che la
   rende una scatola da toccare invece di una riga di lettura, e `is-picked`
   per quella scelta. Serve a qualunque elenco in cui si sceglie una cosa
   sola: gateway, indirizzi, corrieri.

   `.sw-metric__unit` sta qui accanto perche' nasce nello stesso posto: il
   simbolo della valuta di fianco al totale, che prima era `fs-5 text-muted`.
   ========================================================================= */
html body.nedate-ui-standard .sw-listrow--pick {
  display: block !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-sm, 10px) !important;
  background: var(--sw-surface) !important;
  cursor: pointer !important;
  transition: border-color .16s ease, background-color .16s ease !important;
}
html body.nedate-ui-standard .sw-listrow--pick:last-of-type { border-bottom: 1px solid var(--sw-line) !important; }
html body.nedate-ui-standard .sw-listrow--pick:hover {
  border-color: var(--sw-line-strong) !important;
  background: var(--sw-surface-2) !important;
}
html body.nedate-ui-standard .sw-listrow--pick.is-picked {
  border-color: var(--sw-brand-600) !important;
  background: var(--sw-brand-50) !important;
}
html body.nedate-ui-standard .sw-listrow--pick:focus-within {
  outline: 2px solid var(--sw-brand-600) !important;
  outline-offset: 2px !important;
}
/* Il nome di quello che si sceglie: e' il titolo della riga. */
html body.nedate-ui-standard .sw-listrow__title {
  color: var(--sw-ink) !important;
  font-size: var(--sw-text-sm, .9375rem) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.25 !important;
}
html body.nedate-ui-standard .sw-listrow--pick > .sw-listrow__body > .flex-grow-1 > div > i {
  color: var(--sw-muted) !important;
}
html body.nedate-ui-standard .sw-listrow--pick.is-picked > .sw-listrow__body > .flex-grow-1 > div > i {
  color: var(--sw-brand-600) !important;
}

/* L'unita' accanto a un numero grande: la valuta, il «kg», il «cm». Non e' il
   numero, quindi non ne prende la taglia. */
html body.nedate-ui-standard .sw-metric__unit {
  color: var(--sw-muted) !important;
  font-size: .5em !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  letter-spacing: 0 !important;
}

/* =========================================================================
   226. LA CARD «METODO DI PAGAMENTO» — il modal del checkout
   -------------------------------------------------------------------------
   Questa card e' l'ultimo passo di tre flussi diversi: la spedizione, la
   ricarica del portafoglio e il pagamento di una fattura. La costruisce
   `public/js/checkout.js`, e fino a oggi si portava dietro **centotrenta righe
   di CSS scritte dentro il JavaScript** e iniettate in `<head>` al primo
   apertura. Erano tutte a colori fissi — `#fff`, `#dfe3e6`, `#f53324`,
   `#27313b`, raggio `4px` — quindi in tema scuro la scheda restava bianca, e
   il rosso non era il rosso del sito (`#f53324` contro `#d92336`).

   Ora stanno qui, sui gettoni. Il Select2 della carta salvata non ha piu'
   regole sue: prende quelle comuni come ogni altro Select2 del sito. Di suo
   restano solo le due cose che sono funzione e non gusto: la tendina deve
   stare sopra al modal, e il bottone deve tenere l'altezza mentre dentro si
   scambiano etichetta e rotella.
   ========================================================================= */

/* Il guscio del checkout e' identico su shipping, wallet, POD e stock.
   Alcune pagine hanno il modal gia' nel Blade, altre lo creano via checkout.js:
   l'aspetto quindi vive qui e non nel markup della singola pagina. */
html body.nedate-ui-standard #checkoutModal .modal-content {
  border: 0 !important;
  border-radius: var(--sw-radius-lg, 14px) !important;
  background: var(--sw-surface) !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .22) !important;
  overflow: hidden !important;
}
html body.nedate-ui-standard #checkoutModal .modal-header {
  background: var(--sw-surface) !important;
  border-bottom: 1px solid var(--sw-line) !important;
}
html body.nedate-ui-standard #checkoutModal .modal-title {
  color: var(--sw-ink) !important;
  font-weight: var(--sw-weight-semi, 600) !important;
}
html body.nedate-ui-standard #checkoutModal .modal-body {
  background: var(--sw-surface) !important;
  color: var(--sw-ink) !important;
}
html body.nedate-ui-standard #checkoutModal .gateway-option {
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-sm, 10px) !important;
  background: var(--sw-surface) !important;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
html body.nedate-ui-standard #checkoutModal .gateway-option:hover {
  border-color: var(--sw-line-strong) !important;
  background: var(--sw-surface-2) !important;
}
html body.nedate-ui-standard #checkoutModal .gateway-option.is-picked {
  border-color: var(--sw-brand-600) !important;
  background: var(--sw-brand-50) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-brand-600) 12%, transparent) !important;
}
html body.nedate-ui-standard #checkoutModal .form-select {
  min-height: 48px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-sm, 10px) !important;
  background-color: var(--sw-surface) !important;
  color: var(--sw-ink) !important;
}

/* Overlay gateway condiviso: un solo stile per tutti i flussi di pagamento. */
#paymentOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#paymentOverlay .overlay-inner {
  position: relative;
  width: min(1000px, 96vw);
  height: min(90vh, 800px);
  background: var(--sw-surface, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
#paymentOverlay .overlay-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--sw-surface-2, #f8f9fa);
  border-bottom: 1px solid var(--sw-line, rgba(0, 0, 0, .06));
  z-index: 2;
}
#paymentOverlay .overlay-title {
  color: var(--sw-ink, #333);
  font-size: 14px;
  font-weight: 600;
}
#paymentOverlay .overlay-close {
  border: 0;
  background: transparent;
  color: var(--sw-ink, #333);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
#paymentOverlay .overlay-body {
  position: absolute;
  top: 52px;
  bottom: 0;
  left: 0;
  right: 0;
}
#paymentOverlay iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--sw-surface, #fff);
}
#paymentOverlay .overlay-loading {
  position: absolute;
  inset: 52px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sw-ink, #333);
  pointer-events: none;
}

/* La tendina della carta salvata esce dal modal: Bootstrap tiene il modal a
   1055, quindi la tendina sta sopra. */
.select2-dropdown.checkout-saved-card-dropdown { z-index: 2055 !important; }
.select2-dropdown.checkout-saved-card-dropdown .select2-results > .select2-results__options {
  max-height: 210px !important;
}

html body.nedate-ui-standard #checkoutModal .checkout-saved-card-box { position: relative !important; }

/* Il filo sotto al totale: prima era `border-bottom` di Bootstrap, che dentro
   al modal leggeva un `--bs-border-color` diverso dal gettone (rgb(224,227,228)
   invece di rgb(228,233,240)). */
html body.nedate-ui-standard #checkoutModal .checkout-total {
  border-bottom: 1px solid var(--sw-line) !important;
}
/* Il riquadro dove finisce l'iframe del gateway: finche' e' vuoto non deve
   lasciare quattordici pixel di niente sopra al totale. */
html body.nedate-ui-standard #checkoutModal #gatewayFrameContainer:empty {
  margin: 0 !important;
}

/* La spunta «salva la carta»: una scatola che si accende quando e' scelta,
   stessa grammatica della riga che si sceglie qui sopra. */
html body.nedate-ui-standard #checkoutModal .checkout-save-card-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--sw-radius-sm, 10px) !important;
  background: var(--sw-surface) !important;
  transition: border-color .16s ease, background-color .16s ease, opacity .16s ease !important;
}
html body.nedate-ui-standard #checkoutModal .checkout-save-card-option.d-none {
  display: none !important;
}
html body.nedate-ui-standard #checkoutModal .checkout-save-card-option:hover {
  border-color: var(--sw-line-strong) !important;
  background: var(--sw-surface-2) !important;
}
html body.nedate-ui-standard #checkoutModal .checkout-save-card-option:has(.form-check-input:checked) {
  border-color: var(--sw-brand-600) !important;
  background: var(--sw-brand-50) !important;
}
html body.nedate-ui-standard #checkoutModal .checkout-save-card-option .form-check-input {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
html body.nedate-ui-standard #checkoutModal .checkout-save-card-option .form-check-label {
  margin: 0 !important;
  color: var(--sw-body, var(--sw-ink)) !important;
  font-size: var(--sw-text-sm, .9375rem) !important;
  font-weight: var(--sw-weight-medium, 500) !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
}
/* `opacity-75` lo mette il JS quando la spunta non si puo' usare. */
html body.nedate-ui-standard #checkoutModal .checkout-save-card-option.opacity-75 {
  opacity: .55 !important;
  background: var(--sw-surface-2) !important;
}
html body.nedate-ui-standard #checkoutModal .checkout-save-card-option.opacity-75 .form-check-label { cursor: default !important; }

/* Il bottone «conferma e paga» tiene l'altezza mentre dentro si scambiano
   l'etichetta e la rotella: se no la card salta di quaranta pixel. */
html body.nedate-ui-standard #checkoutModal #btnConfirmGateway {
  min-height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}
html body.nedate-ui-standard #checkoutModal :is(#paymentProcessingText, #paymentProcessingNote) {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
}
/* Dentro un bottone rosso il testo e' bianco, anche quando la classe dice
   altro: la scritta «pagamento sicuro» e' un `.small`, e i `.small` di questo
   sito prendono `--sw-ink-small` da una regola di `nedate-unified.css` che
   pesa (3,14,3) — inutile provare a superarla. Si fa come dice il commento di
   quella regola: chi si dipinge da solo ri-punta il gettone, e il testo
   dentro lo segue. */
html body.nedate-ui-standard #checkoutModal #btnConfirmGateway {
  --sw-ink-small: currentColor;
  --sw-ink-body: currentColor;
  --sw-muted: currentColor;
}
html body.nedate-ui-standard #checkoutModal :is(#paymentProcessingText, #paymentProcessingNote).d-none { display: none !important; }

/* =========================================================================
   227. IL RIQUADRO D'ICONA NELLE DUE TINTE DI ESITO
   -------------------------------------------------------------------------
   `sw-card-icon--quiet` (la 187) dice «ecco di cosa parla questa scheda».
   Queste due dicono «e' andata» e «non e' andata», e servono dove l'esito e'
   il contenuto della pagina: la spedizione appena creata, la finestra che
   avvisa che l'etichetta non si e' potuta generare.

   Prima ognuna di quelle pagine se lo dipingeva da sola con la tavolozza di
   Bootstrap — `bg-success-subtle text-success`, `bg-danger-subtle
   text-danger` — cioe' il verde e il rosa di Bootstrap su un sito che non ne
   usa nessun altro, e che in tema scuro restavano chiari.
   ========================================================================= */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .sw-card-icon--ok {
  background: var(--sw-success-bg) !important;
  border: 1px solid transparent !important;
  color: var(--sw-success) !important;
  -webkit-text-fill-color: var(--sw-success) !important;
}
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .sw-card-icon--stop {
  background: var(--sw-danger-bg) !important;
  border: 1px solid transparent !important;
  color: var(--sw-danger) !important;
  -webkit-text-fill-color: var(--sw-danger) !important;
}
/* Il riquadro sta in una testata che e' una riga flessibile: senza questo, il
   testo accanto gli ruba larghezza e il quadrato diventa un rettangolo (misurato:
   41,8 x 50 invece di 50 x 50). */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .sw-panel__head > .sw-card-icon {
  flex: 0 0 auto !important;
}
/* Dentro la testata di un modal il riquadro sta accanto al titolo, quindi e'
   piu' piccolo: li' il titolo e' la voce principale, non l'icona. */
html:not(#_):not(#__) body.nedate-ui-standard[class][class][class][class][class] .modal-title > :is(.sw-card-icon--ok, .sw-card-icon--stop) {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: .95rem !important;
}

/* =========================================================================
   SHARED APP PAGE FRAME — distanza navbar -> prima testata
   -------------------------------------------------------------------------
   Wallet e conferma spedizione usano lo stesso frame. Questa classe non
   disegna la pagina: normalizza solo il respiro verticale sopra il primo
   hero/kicker, mantenendo le stesse misure già corrette del wallet.
   ========================================================================= */
@media (min-width: 1200px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard main > .sw-app-page-frame {
    padding-top: var(--nd-app-frame-top, 8.25rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard main > .sw-app-page-frame {
    padding-top: calc(var(--sw-nav-height, 62px) + 1rem) !important;
  }
}

@media (max-width: 767.98px) {
  html:not(#_):not(#__):not(#___):not(#____) body.nedate-ui-standard main > .sw-app-page-frame {
    padding-top: calc(var(--sw-nav-height, 56px) + 1rem) !important;
  }
}

/* =========================================================================
   228. MENU AZIONE SEMPRE SOPRA — STACK GLOBALE
   -------------------------------------------------------------------------
   Ogni kebab mobile vive in una riga diversa. Con lo stesso z-index, la riga
   successiva nel DOM poteva disegnare il proprio pulsante sopra una tendina
   gia' aperta. Quando un dropdown e' visibile, alziamo l'intera card e il suo
   contenitore, non soltanto la tendina. Vale per tutti i menu azione comuni.
   ========================================================================= */
html body.nedate-ui-standard .sw-card-has-menu:has(.sw-card-menu > .dropdown-menu.show) {
  position: relative !important;
  z-index: 2050 !important;
}
html body.nedate-ui-standard .sw-card-menu:has(> .dropdown-menu.show) {
  z-index: 2060 !important;
}
html body.nedate-ui-standard .sw-card-menu > .dropdown-menu.show {
  z-index: 2070 !important;
}

/* Anche i dropdown comuni fuori dalle card devono restare sopra ai contenuti
   della pagina. Il livello resta sotto navbar/modali di sistema. */
html body.nedate-ui-standard .dropdown:has(> .dropdown-menu.show) {
  position: relative;
  z-index: 2050 !important;
}
html body.nedate-ui-standard .dropdown-menu.show {
  z-index: 2070 !important;
}

/* =========================================================================
   229. AZIONI DEI FILTRI — STESSA LARGHEZZA SUL TELEFONO
   -------------------------------------------------------------------------
   Un solo comando occupa tutta la riga. Quando compare "Reimposta", i
   due comandi si dividono lo spazio disponibile. Da tablet/desktop tornano
   pulsanti compatti, affiancati a destra.
   ========================================================================= */
html body.nedate-ui-standard .sw-filter-actions {
  display: flex !important;
  align-items: stretch !important;
  gap: .5rem !important;
  justify-content: flex-end !important;
}
html body.nedate-ui-standard .sw-filter-actions .sw-filter-action {
  flex: 0 0 auto !important;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-filter-actions {
    width: 100% !important;
    flex-wrap: nowrap !important;
  }
  html body.nedate-ui-standard .sw-filter-actions .sw-filter-action {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    justify-content: center !important;
  }
}

/* =========================================================================
   230. PANNELLO FILTRI COLLASSABILE SUL TELEFONO
   -------------------------------------------------------------------------
   Su desktop il pannello resta sempre aperto. Sul telefono la testata diventa
   il comando di apertura: titolo + caret, senza sembrare un pulsante.
   ========================================================================= */
html body.nedate-ui-standard .sw-filter-toggle {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  text-align: left !important;
  box-shadow: none !important;
}

html body.nedate-ui-standard .sw-filter-toggle__caret {
  display: none !important;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-filter-panel__head {
    margin-bottom: 0 !important;
  }

  html body.nedate-ui-standard .sw-filter-toggle {
    cursor: pointer !important;
    min-height: 32px !important;
  }

  html body.nedate-ui-standard .sw-filter-toggle__caret {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 1rem !important;
    transition: transform .18s ease !important;
  }

  html body.nedate-ui-standard .sw-filter-panel:not(.is-open) .sw-filter-panel__body {
    display: none !important;
  }

  html body.nedate-ui-standard .sw-filter-panel.is-open .sw-filter-panel__body {
    display: block !important;
    margin-top: 1rem !important;
  }

  html body.nedate-ui-standard .sw-filter-panel.is-open .sw-filter-toggle__caret {
    transform: rotate(180deg) !important;
  }

  html body.nedate-ui-standard .sw-filter-panel :is(
    input.form-control,
    select.form-select,
    .select2-container
  ) {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (min-width: 768px) {
  html body.nedate-ui-standard .sw-filter-panel__body {
    display: block !important;
  }
}

/* Ogni campo del pannello filtri occupa una riga intera sul telefono.
   Le proporzioni desktop restano quelle definite dal grid del singolo Blade. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-filter-panel .sw-filter-form.row > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.nedate-ui-standard .sw-filter-panel .sw-filter-form :is(
    .form-control,
    .form-select,
    .select2-container
  ) {
    width: 100% !important;
    max-width: none !important;
  }

  /* L'unica eccezione e' la riga delle azioni: il contenitore resta largo
     tutta la card, mentre i pulsanti al suo interno si dividono lo spazio. */
  html body.nedate-ui-standard .sw-filter-panel .sw-filter-actions {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================================
   231. FILTRI CONDIVISI — AREA UTENTE
   -------------------------------------------------------------------------
   Le stesse regole dei filtri admin valgono anche nell'area autenticata:
   campi a tutta larghezza sul telefono, vecchi toggle mobili ritirati e
   azioni Filtra/Reimposta sulla stessa riga.
   ========================================================================= */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-filter-panel .sw-filter-form .row > [class*="col-"],
  html body.nedate-ui-standard .sw-filter-panel .sw-filter-form > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.nedate-ui-standard .sw-filter-panel .sw-filter-form:not(.row) {
    width: 100% !important;
  }

  html body.nedate-ui-standard .sw-filter-panel .shipments-filter-topbar,
  html body.nedate-ui-standard .sw-filter-panel .shipments-filter-lower {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .75rem !important;
    width: 100% !important;
  }

  html body.nedate-ui-standard .sw-filter-panel :is(
    .shipments-filter-search,
    .shipments-filter-select,
    .shipments-filter-per-page,
    .shipments-filter-actions,
    .imports-filter-actions,
    .address-book-filter-actions,
    .sw-filter-search,
    .sw-filter-select
  ) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prima del JS non deve ricomparire il vecchio pulsante esterno
     Mostra/Nascondi filtri. */
  html body.nedate-ui-standard .shipments-filters-toggle:has(+ .shipments-filters-collapse .sw-filter-form),
  html body.nedate-ui-standard .imports-filters-toggle:has(+ .imports-filters-collapse .sw-filter-form),
  html body.nedate-ui-standard .address-book-filters-toggle:has(+ .address-book-filters-collapse .sw-filter-form) {
    display: none !important;
  }

  html body.nedate-ui-standard .shipments-filters-collapse:has(.sw-filter-form),
  html body.nedate-ui-standard .imports-filters-collapse:has(.sw-filter-form),
  html body.nedate-ui-standard .address-book-filters-collapse:has(.sw-filter-form) {
    display: block !important;
  }
}

/* =========================================================================
   232. STATO VUOTO DOPO UN FILTRO — COMPONENTE CONDIVISO
   -------------------------------------------------------------------------
   Stesso risultato in /admin/* e /user/*: funnel, messaggio breve e comando
   Reimposta. Il contenuto resta contestuale, il comportamento visivo no.
   ========================================================================= */
html body.nedate-ui-standard .sw-filter-empty > .sw-filter-empty__icon {
  color: var(--sw-line-strong) !important;
}

html body.nedate-ui-standard :is(
  .sw-filter-empty .sw-filter-empty__reset,
  .sw-empty .sw-empty__action
) {
  min-width: 180px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard :is(
    .sw-filter-empty .sw-filter-empty__reset,
    .sw-empty .sw-empty__action
  ) {
    width: min(100%, 245px) !important;
  }
}

/* Required interactive choices that are not native form controls. */
html body.nedate-ui-standard .sw-required-choice.is-invalid {
  color: var(--bs-danger) !important;
  border-bottom: 1px solid currentColor !important;
}

/* Custom dropdown/choice controls must show validation like native fields. */
html body.nedate-ui-standard :is(.sw-required-choice, .sw-validation-choice).is-invalid {
  color: var(--sw-danger, #d92336) !important;
  border-bottom: 1px solid currentColor !important;
}

/* =========================================================================
   EMPTY STATE ACTIONS — one global button language
   -------------------------------------------------------------------------
   Any action placed inside an empty state uses the same quiet rectangular
   button shape as Filter Reset. Legacy sw-panel__action links are normalized
   here too, so old Blade views inherit the current standard automatically.
   ========================================================================= */
html body.nedate-ui-standard .sw-empty :is(
  .sw-empty__action,
  .sw-panel__action
) {
  min-width: 180px !important;
  min-height: 48px !important;
  padding: .75rem 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--bs-border-radius, .375rem) !important;
  box-shadow: none !important;
  font-size: .875rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard .sw-empty :is(
  .sw-empty__action,
  .sw-panel__action
):is(:hover, :focus-visible) {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border-color: var(--sw-line-strong) !important;
}
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-empty :is(
    .sw-empty__action,
    .sw-panel__action
  ) {
    width: min(100%, 245px) !important;
  }
}

/* Empty-state actions are always neutral. The empty state already explains
   what is missing; its recovery action must not look like a page-level CTA. */
html body.nedate-ui-standard .sw-empty :is(
  .btn,
  .sw-panel__action
) {
  min-width: 180px !important;
  min-height: 48px !important;
  padding: .75rem 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: var(--bs-border-radius, .375rem) !important;
  box-shadow: none !important;
  font-size: .875rem !important;
  font-weight: var(--sw-weight-semi, 600) !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}
html body.nedate-ui-standard .sw-empty :is(
  .btn,
  .sw-panel__action
):is(:hover, :focus-visible) {
  color: var(--sw-ink) !important;
  -webkit-text-fill-color: var(--sw-ink) !important;
  background: var(--sw-surface-2, #f0f4f9) !important;
  border-color: var(--sw-line-strong) !important;
  box-shadow: none !important;
}
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-empty :is(
    .btn,
    .sw-panel__action
  ) {
    width: min(100%, 245px) !important;
  }
}

/* Cart items header: on mobile the total badge stays pinned to the far right. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .cart-page .cart-items-panel-head {
    position: relative !important;
    width: 100% !important;
  }

  html body.nedate-ui-standard .cart-page .cart-items-panel-head > :first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html body.nedate-ui-standard .cart-page .cart-items-panel-head > .sw-pill {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }
}

/* Required pill/radio choices: show the same invalid state as native fields. */
html body.nedate-ui-standard .btn-check.is-invalid + .sw-choice__pill {
  border-color: var(--sw-danger, #dc3545) !important;
  color: var(--sw-danger, #dc3545) !important;
  -webkit-text-fill-color: var(--sw-danger, #dc3545) !important;
}

/* Borderless icon action for card menus: icon only, no surrounding box. */
html body.nedate-ui-standard .sw-iconbtn.sw-iconbtn--bare {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body.nedate-ui-standard .sw-iconbtn.sw-iconbtn--bare:is(:hover, :focus-visible, :active) {
  background: var(--sw-surface-2, rgba(15, 23, 42, .04)) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Required groups such as API permission checklists. */
html body.nedate-ui-standard .sw-required-group.is-invalid {
  outline: 1px solid var(--bs-danger, #dc3545) !important;
  outline-offset: 4px !important;
  border-radius: 10px !important;
}

/* API permissions: validation keeps the message but does not draw a red card border. */
html body.nedate-ui-standard #perm-grid.sw-required-group.is-invalid {
  outline: 0 !important;
  outline-offset: 0 !important;
}

/* =========================================================================
   USER API — permission tools and final actions
   ========================================================================= */
html body.nedate-ui-standard .user-api-permission-tools {
  margin-left: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.nedate-ui-standard .user-api-permission-tool > i {
  display: none !important;
}

html body.nedate-ui-standard .user-api-form-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .5rem !important;
  width: 100% !important;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard .user-api-permission-card {
    position: relative !important;
  }

  html body.nedate-ui-standard .user-api-permission-card .api-whitelist-head,
  html body.nedate-ui-standard .user-api-permission-card > .sw-panel__head {
    padding-right: 92px !important;
  }

  html body.nedate-ui-standard .user-api-permission-tools {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    z-index: 3 !important;
  }

  html body.nedate-ui-standard .user-api-permission-tool {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--sw-line) !important;
    border-radius: 10px !important;
    background: var(--sw-surface-2, rgba(15, 23, 42, .04)) !important;
    box-shadow: none !important;
  }

  html body.nedate-ui-standard .user-api-permission-tool__label {
    display: none !important;
  }

  html body.nedate-ui-standard .user-api-permission-tool > i {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  html body.nedate-ui-standard .user-api-form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body.nedate-ui-standard .user-api-form-actions > :is(.btn, a, button) {
    width: 100% !important;
    min-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* =========================================================================
   USER API — whitelist card actions
   ========================================================================= */
html body.nedate-ui-standard .api-whitelist-panel {
  position: relative !important;
}

html body.nedate-ui-standard .api-whitelist-add {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
}

html body.nedate-ui-standard .api-whitelist-remove {
  width: calc(3.5rem + 2px) !important;
  min-width: calc(3.5rem + 2px) !important;
  height: 60px !important;
  min-height: 60px !important;
  border-radius: var(--bs-border-radius, .375rem) !important;
  font-size: 1rem !important;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard .api-whitelist-head {
    padding-right: 0 !important;
  }

  html body.nedate-ui-standard .api-whitelist-add {
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    padding: .75rem 1rem !important;
    border-radius: var(--bs-border-radius, .375rem) !important;
    z-index: auto !important;
  }

  html body.nedate-ui-standard .api-whitelist-add__label {
    display: inline !important;
  }

  html body.nedate-ui-standard .api-whitelist-add > i {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }
}

/* API whitelist: the remove control matches the adjacent floating text field. */
html body.nedate-ui-standard .whitelist-item .api-whitelist-remove {
  width: calc(3.5rem + 2px) !important;
  min-width: calc(3.5rem + 2px) !important;
  height: 60px !important;
  min-height: 60px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  transform: translateX(.4rem) !important;
  align-self: center !important;
  border-radius: 0 !important;
  font-size: 1rem !important;
}

/* Card actions that keep text on desktop and collapse to a top-right icon on mobile. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-card-menu > .sw-card-mobile-icon-action {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--sw-line) !important;
    border-color: var(--sw-line) !important;
    border-radius: 10px !important;
    background: var(--sw-surface-2, rgba(15, 23, 42, .04)) !important;
    box-shadow: none !important;
  }

  html body.nedate-ui-standard .sw-card-menu > .sw-card-mobile-icon-action:is(:hover, :focus-visible, :active) {
    background: var(--sw-surface-2, rgba(15, 23, 42, .08)) !important;
    border-color: var(--sw-line-strong, var(--sw-line)) !important;
    box-shadow: none !important;
  }

  html body.nedate-ui-standard .sw-card-mobile-icon-action__label {
    display: none !important;
  }
}

/* User API edit: long public keys must wrap inside the credentials card. */
html body.nedate-ui-standard .user-api-public-key-code {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  text-overflow: clip !important;
}

/* User API edit: public-key copy action is a plain text link aligned right. */
html body.nedate-ui-standard .user-api-copy-link {
  margin-left: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font: inherit !important;
  line-height: inherit !important;
}
html body.nedate-ui-standard .user-api-copy-link:is(:hover, :focus, :focus-visible, :active) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  outline: 0 !important;
}

/* User API edit: keep the public-key label and copy link on one full-width row on mobile. */
html body.nedate-ui-standard .sw-kv--stack > .user-api-public-key-head {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
}
html body.nedate-ui-standard .sw-kv--stack > .user-api-public-key-head .user-api-copy-link {
  margin-left: auto !important;
}

/* User API edit: on mobile the whitelist add action is icon-only. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .user-api-page .sw-panel__head:has(.api-whitelist-add) {
    position: relative !important;
    padding-right: 64px !important;
  }

  html body.nedate-ui-standard .user-api-page .sw-panel__head:has(.api-whitelist-add) .sw-panel__tools {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    margin: 0 !important;
  }

  html body.nedate-ui-standard .user-api-page .api-whitelist-add {
    position: static !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--sw-line) !important;
    border-radius: 10px !important;
    background: var(--sw-surface-2, rgba(15, 23, 42, .04)) !important;
  }

  html body.nedate-ui-standard .user-api-page .api-whitelist-add__label {
    display: none !important;
  }

  html body.nedate-ui-standard .user-api-page .api-whitelist-add > i {
    margin: 0 !important;
  }
}

/* User API edit: permission cards show a human title, code and explanation. */
html body.nedate-ui-standard .user-api-permission-option {
  margin-bottom: .75rem !important;
}

html body.nedate-ui-standard .user-api-permission-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .3rem !important;
  min-width: 0 !important;
}

html body.nedate-ui-standard .user-api-permission-title {
  color: var(--sw-ink) !important;
  font-size: .95rem !important;
  font-weight: var(--sw-weight-bold, 700) !important;
  line-height: 1.25 !important;
}

html body.nedate-ui-standard .user-api-permission-description {
  color: var(--sw-muted) !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
  font-weight: var(--sw-weight-regular, 400) !important;
}

/* User API edit: copied state is neutral text, without underline. */
html body.nedate-ui-standard .user-api-copy-link.is-copied,
html body.nedate-ui-standard .user-api-copy-link.is-copied:is(:hover, :focus, :focus-visible, :active) {
  color: var(--sw-ink) !important;
  text-decoration: none !important;
  font-weight: var(--sw-weight-regular, 400) !important;
}

/* =========================================================================
   DOCS API — MOBILE ACTIONS + LONG CODE WRAP
   ========================================================================= */
html body.nedate-ui-standard .docs-api-page .docs-api-wrap-code {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard .docs-api-page .sw-code {
    overflow-x: hidden !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  html body.nedate-ui-standard .docs-api-page .sw-code > code {
    white-space: inherit !important;
    overflow-wrap: inherit !important;
    word-break: inherit !important;
  }

  html body.nedate-ui-standard .docs-api-page .sw-listrow__body,
  html body.nedate-ui-standard .docs-api-page .min-w-0 {
    min-width: 0 !important;
  }
}

/* Docs API: endpoint titles/paths must never widen the row on narrow screens. */
html body.nedate-ui-standard .docs-api-page .docs-api-endpoint-main,
html body.nedate-ui-standard .docs-api-page .docs-api-endpoint-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.nedate-ui-standard .docs-api-page .docs-api-endpoint-name {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard .docs-api-page .sw-listrow > .sw-listrow__body > .d-flex {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.nedate-ui-standard .docs-api-page .docs-api-endpoint-copy {
    overflow: hidden !important;
  }

  html body.nedate-ui-standard .docs-api-page .docs-api-endpoint-copy > a,
  html body.nedate-ui-standard .docs-api-page .docs-api-endpoint-copy > .docs-api-wrap-code,
  html body.nedate-ui-standard .docs-api-page .docs-api-endpoint-copy > p {
    max-width: 100% !important;
  }
}

/* Docs API: give response code blocks breathing room below the accordion header. */
html body.nedate-ui-standard .docs-api-page #responses .accordion-body {
  padding-top: .75rem !important;
}


/* =========================================================================
   DESKTOP SITE ON A PHONE — FIXED SHELL MUST FOLLOW THE UNSCALED VIEWPORT
   -------------------------------------------------------------------------
   Root zoom is used only when Chrome Android requests "Sito desktop".
   Fixed elements otherwise get scaled twice by the browser: a 100vw navbar
   ends before the physical right edge and a 100vh sidebar ends before the
   physical bottom edge. The viewport helper exposes the pre-zoom dimensions.
   ========================================================================= */
html.sw-desktop-site-phone body.nedate-ui-standard .navbar.navbar-azure.fixed-top {
  left: 0 !important;
  right: auto !important;
  width: var(--sw-desktop-phone-fixed-width, 1200px) !important;
  min-width: var(--sw-desktop-phone-fixed-width, 1200px) !important;
  max-width: none !important;
}

html.sw-desktop-site-phone body.nedate-ui-standard .navbar-azure > .container-fluid {
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 960px) {
  html.sw-desktop-site-phone body.nedate-ui-standard.nedate-has-desktop-sidebar .adm-sidebar:is(.expanded, .collapsed) {
    top: 72px !important;
    bottom: auto !important;
    height: calc(var(--sw-desktop-phone-fixed-height, 100vh) - 72px) !important;
    min-height: calc(var(--sw-desktop-phone-fixed-height, 100vh) - 72px) !important;
    max-height: calc(var(--sw-desktop-phone-fixed-height, 100vh) - 72px) !important;
  }
}


/* Empty validation placeholders must stay invisible.
   Error copy is rendered only when validation actually fails. */
html body.nedate-ui-standard .invalid-feedback:empty {
  display: none !important;
}

/* ==========================================================================
   Plan editor: responsive tab navigation and catalogue action.
   Kept in the shared stylesheet because the same partial powers create/edit.
   ========================================================================== */
html body.nedate-ui-standard .plans-page #planEditorTabs.plan-editor-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
html body.nedate-ui-standard .plans-page #planEditorTabs.plan-editor-tabs .nav-link {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
}
html body.nedate-ui-standard .plans-page #planEditorTabs.plan-editor-tabs .nav-link i {
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  html body.nedate-ui-standard .plans-page .plan-catalogue-manage-text {
    display: none !important;
  }
  html body.nedate-ui-standard .plans-page .plan-catalogue-manage-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body.nedate-ui-standard .plans-page .plan-catalogue-manage-btn .bi {
    margin: 0 !important;
    font-size: 1.1rem;
  }
  html body.nedate-ui-standard .plans-page #planEditorTabs.plan-editor-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: .5rem !important;
  }
  html body.nedate-ui-standard .plans-page #planEditorTabs.plan-editor-tabs .nav-link {
    min-width: 0;
    width: 100% !important;
    min-height: 46px;
    padding: .7rem .75rem;
    justify-content: flex-start;
    white-space: normal !important;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  html body.nedate-ui-standard .plans-page #planEditorTabs.plan-editor-tabs {
    grid-template-columns: 1fr;
  }
}

/* Generic helper for JS-filtered option rows whose base component uses
   display:flex!important. */
html body.nedate-ui-standard .sw-filter-hidden {
  display: none !important;
}


/* === Global residual-inline cleanup utilities === */
.sw-max-w-320 { max-width: 320px !important; }
.sw-max-w-24r { max-width: 24rem !important; }
.sw-max-w-560 { max-width: 560px !important; }
.sw-max-w-640 { max-width: 640px !important; }
.sw-max-w-720 { max-width: 720px !important; }
.sw-max-w-900 { max-width: 900px !important; }
.sw-max-w-1480 { max-width: 1480px !important; }
.sw-max-w-280 { max-width: 280px !important; }
.sw-min-w-190 { min-width: 190px !important; }
.sw-min-w-11r { min-width: 11rem !important; }
.sw-min-w-13r { min-width: 13rem !important; }
.sw-min-w-15r { min-width: 15rem !important; }
.sw-min-w-9r { min-width: 9rem !important; }
.sw-min-w-36 { min-width: 36px !important; }

textarea.sw-textarea-5r { height: 5rem !important; }
textarea.sw-textarea-9r { height: 9rem !important; }
textarea.sw-textarea-58 { height: 58px !important; }
textarea.sw-textarea-100 { height: 100px !important; }
textarea.sw-textarea-130 { height: 130px !important; }
textarea.sw-textarea-140 { height: 140px !important; }
textarea.sw-textarea-170 { height: 170px !important; }
textarea.sw-textarea-190 { height: 190px !important; }
textarea.sw-textarea-220 { height: 220px !important; }

.sw-thumb--40 { width: 40px !important; height: 40px !important; padding: 4px !important; }
.sw-thumb--58 { width: 58px !important; height: 58px !important; }
.sw-thumb--64 { width: 64px !important; height: 64px !important; }
.sw-thumb--100 { width: 100px !important; height: 100px !important; padding: 12px !important; }
.sw-thumb--120h { height: 120px !important; }
.sw-thumb--220h { height: 220px !important; }

.sw-logo-size-32 { width: 32px !important; height: 32px !important; object-fit: contain !important; }
.sw-logo-size-38 { width: 38px !important; height: 38px !important; object-fit: contain !important; }
.sw-logo-size-44 { width: 44px !important; height: 44px !important; object-fit: contain !important; }

.sw-scrollbox-260 { max-height: 260px !important; overflow: auto !important; }
.sw-scrollbox-200 { max-height: 200px !important; overflow-y: auto !important; }
.sw-scrollbox-180 { max-height: 180px !important; overflow-y: auto !important; }
.sw-scrollbox-160 { max-height: 160px !important; overflow: auto !important; }
.sw-max-h-2-2em { max-height: 2.2em !important; }
.sw-pre-scroll { max-height: 40vh !important; overflow: auto !important; white-space: pre-wrap !important; word-break: break-word !important; }

.sw-col-w-42 { width: 42px !important; }
.sw-col-w-45 { width: 45px !important; }
.sw-col-w-52 { width: 52px !important; }
.sw-col-w-140 { width: 140px !important; }

.sw-z-1050 { z-index: 1050 !important; }
.sw-clickable { cursor: pointer !important; transition: all .2s ease-in-out !important; }
.sw-summary-boundary { height: 0 !important; overflow: hidden !important; pointer-events: none !important; }
.sw-navbar-brand-logo { object-fit: contain !important; max-height: 36px !important; max-width: 160px !important; }
.sw-dropdown-min-14 { min-width: 14rem !important; }
.sw-partner-logo { max-height: 70px !important; object-fit: contain !important; }
.sw-auth-mail-icon { width: 48px !important; height: 48px !important; background: rgba(var(--bs-primary-rgb), .1) !important; }
.sw-theme-primary-color { color: var(--theme-primary, #e61a0a) !important; }


/* Residual inline cleanup: runtime-safe shared utilities. */
.sw-textarea-11r { height: 11rem !important; }
.sw-js-hidden { display: none; }
.sw-z-1000 { z-index: 1000 !important; }
.sw-suggestion-box-160 { z-index: 1050 !important; max-height: 160px !important; overflow: auto !important; }
.sw-suggestion-box-180 { z-index: 1050 !important; max-height: 180px !important; overflow-y: auto !important; }
.sw-stat-chart { height: 180px !important; overflow-x: auto !important; overflow-y: hidden !important; }
.sw-stat-chart-label { font-size: .62rem !important; line-height: 1.2 !important; }
.sw-sidebar-brand-spacer { height: 60px !important; flex-shrink: 0 !important; }
.sw-sidebar-panel-header { height: 64px !important; }
.sw-wallet-muted-box { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }
.sw-guest-pay-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000; align-items: center; justify-content: center; }
.sw-guest-pay-shell { background: #fff; border-radius: 12px; width: min(920px,96vw); height: min(720px,90vh); display: flex; flex-direction: column; overflow: hidden; }
.sw-guest-pay-frame { border: 0; width: 100%; flex: 1; }
.sw-frame-420 { width: 100% !important; height: 420px !important; border: 0 !important; }
.sw-livechat-launcher-theme { border-radius: 100% !important; background: var(--theme-primary) !important; background-color: var(--theme-primary) !important; background-image: none !important; }
.sw-livechat-send { width: 2.85rem !important; height: 2.85rem !important; min-width: 2.85rem !important; min-height: 2.85rem !important; max-width: 2.85rem !important; max-height: 2.85rem !important; padding: 0 !important; flex: 0 0 2.85rem !important; aspect-ratio: 1 / 1 !important; border-radius: 100% !important; background: var(--theme-primary) !important; background-color: var(--theme-primary) !important; background-image: none !important; border-color: var(--theme-primary) !important; }
.sw-courier-menu-logo { width: 22px !important; height: 22px !important; object-fit: contain !important; }
.sw-courier-menu-icon { font-size: 1.2rem !important; }

.sw-stat-trend-bar { background: var(--sw-brand-600, #d92336) !important; opacity: .85 !important; }

/* App-shell utilities formerly embedded in layouts/app.blade.php. */
.sw-impersonation-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: #dc2626 !important;
  color: #fff !important;
  padding: 8px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.3) !important;
}
.sw-impersonation-icon { vertical-align: -2px !important; margin-right: 6px !important; }
.sw-impersonation-form { margin: 0 !important; }
.sw-impersonation-stop {
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  color: #fff !important;
  padding: 4px 14px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.sw-impersonation-stop-icon { vertical-align: -1px !important; margin-right: 4px !important; }
.sw-app-loader {
  background: var(--sw-overlay, rgba(255,255,255,.85)) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 20000 !important;
}

.sw-max-w-440 { max-width: 440px !important; }
.sw-max-w-520 { max-width: 520px !important; }
.sw-size-92 { width: 92px !important; height: 92px !important; }
textarea.sw-textarea-min-90 { min-height: 90px !important; }
textarea.sw-textarea-min-100 { min-height: 100px !important; }
textarea.sw-textarea-min-132 { min-height: 132px !important; }

/* Courier service workspace: compact mobile hierarchy.
   Keep all functions, reduce chrome so the content starts immediately. */
@media (max-width: 767.98px) {
  html body.nedate-ui-standard .sw-service-workspace-head {
    position: relative;
    margin-bottom: .65rem !important;
  }

  html body.nedate-ui-standard .sw-service-workspace-head .sw-page-heading__content {
    padding-right: 3.25rem !important;
  }

  html body.nedate-ui-standard .sw-service-breadcrumb--mobile {
    display: inline-flex !important;
    align-items: center;
    margin-bottom: .35rem;
    color: var(--bs-secondary-color, #64748b);
    font-size: .82rem;
    font-weight: 600;
  }

  html body.nedate-ui-standard .sw-service-title {
    margin: 0 !important;
    font-size: clamp(1.65rem, 7.2vw, 2rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  html body.nedate-ui-standard .sw-service-lead {
    display: none !important;
  }

  html body.nedate-ui-standard .sw-service-meta {
    margin-top: .55rem !important;
    gap: .35rem !important;
  }

  html body.nedate-ui-standard .sw-service-meta .sw-tag,
  html body.nedate-ui-standard .sw-service-meta .sw-state {
    min-height: 28px !important;
    padding: .3rem .6rem !important;
    font-size: .75rem !important;
    line-height: 1 !important;
  }

  html body.nedate-ui-standard .sw-service-workspace-head .sw-page-actions {
    position: absolute !important;
    top: .95rem !important;
    right: .75rem !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Service workspace: on phones keep only the three-dots menu.
     Add tariff and Settings are already included as the first dropdown items. */
  html body.nedate-ui-standard .sw-service-workspace-head .sw-service-desktop-action {
    display: none !important;
  }

  html body.nedate-ui-standard .sw-service-workspace-head .sw-page-action--menu {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
  }

  html body.nedate-ui-standard .sw-service-nav.card {
    border: 1px solid var(--bs-border-color, #e5e7eb) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background: var(--bs-body-bg, #fff) !important;
  }

  html body.nedate-ui-standard .sw-service-nav .card-body {
    padding: .25rem !important;
  }

  html body.nedate-ui-standard .sw-service-nav .card-body > .d-flex {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .2rem !important;
  }

  html body.nedate-ui-standard .sw-service-nav .btn {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: .45rem .35rem !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: .78rem !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
  }

  html body.nedate-ui-standard .sw-service-nav .btn:not(.btn-primary-custom) {
    background: transparent !important;
    color: var(--bs-body-color, #0f172a) !important;
  }

  html body.nedate-ui-standard .sw-service-nav .btn i {
    display: none !important;
  }

  html body.nedate-ui-standard .sw-service-config-alert {
    min-height: 0 !important;
    padding: .7rem .8rem !important;
    gap: .6rem !important;
    border-radius: 10px !important;
    font-size: .82rem !important;
  }

  html body.nedate-ui-standard .sw-service-config-alert strong {
    font-size: .82rem !important;
    line-height: 1.35 !important;
  }

  html body.nedate-ui-standard .sw-service-config-alert .small {
    display: none !important;
  }

  html body.nedate-ui-standard .sw-service-alert-action {
    border: 0 !important;
    background: transparent !important;
    padding: .2rem 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
  }

  html body.nedate-ui-standard .couriers-page > .row.g-4 {
    --bs-gutter-y: .9rem;
  }

  html body.nedate-ui-standard .couriers-page .sw-panel__head {
    padding-top: 1rem !important;
    padding-bottom: .85rem !important;
  }
}