/*
 * Victrix child — base.
 *
 * Lo styling delle pagine vive nel kit globale Elementor (post ID 15).
 * Qui sta solo cio' che il kit non puo' esprimere: il font di brand
 * self-hosted e un paio di reset.
 */

/* Augustus e' il font display del brand: non e' su Google Fonts, arriva dal
   sito live ed e' servito dal tema. */
@font-face {
	font-family: 'Augustus';
	src: url('../fonts/Augustus.woff2') format('woff2'),
	     url('../fonts/Augustus.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* I colori non si decidono qui: si prendono dalle Impostazioni sito di
   Elementor, che sono l'unico posto dove il cliente li cambia. Elementor li
   pubblica come variabili sul body (la classe del kit sta li'), quindi il
   blocco sta su body e non su :root, o le variabili non sarebbero ancora
   definite.

   I valori dopo la virgola sono solo la rete: servono se il kit non e' ancora
   stato caricato — l'anteprima dell'editor, una pagina servita prima del CSS
   del kit — e sono gli stessi che il kit contiene oggi. Se un giorno
   divergono, comanda il kit.

   Il raggio degli angoli non e' fra i globali di Elementor: quello resta una
   scelta del tema, scritta qui una volta sola. */
body {
	--victrix-bg: var(--e-global-color-primary, #0a0a0a);
	--victrix-surface: var(--e-global-color-secondary, #141414);
	--victrix-border: var(--e-global-color-vxborder, #343434);
	--victrix-text: var(--e-global-color-text, #ffffff);
	--victrix-muted: var(--e-global-color-vxmuted, #a0a0a0);
	--victrix-carattere: var(--e-global-typography-text-font-family, Oxygen), sans-serif;
	--victrix-radius: 10px;
}

body {
	background-color: var(--victrix-bg);
	color: var(--victrix-text);
}

/* --- Il margine laterale del sito --------------------------------------- */

/* Testata, pie' di pagina e pagine devono partire dalla stessa riga verticale,
   a qualunque larghezza di finestra. Prima non era cosi': la testata stava a
   48px dal bordo, le sezioni delle pagine a 74, altre a 24, e la differenza si
   vedeva a occhio nudo.

   Il margine laterale non e' una scelta della singola sezione, e' una misura
   del sito: scritto sezione per sezione dentro a Elementor era destinato a
   divergere — 271 sezioni, quattro valori diversi. Sta qui, una volta sola.

   Vale solo per le sezioni "boxed" (in Elementor: Larghezza contenuto ->
   Contenuto). Quelle a tutta larghezza lo sono apposta — la striscia di testo
   che scorre, una fascia con l'immagine a filo — e rientrarle sarebbe un
   danno. Il padding verticale invece resta di ciascuna sezione: quello cambia
   davvero da una all'altra, ed e' giusto che si scriva li'.

   Da notare che sopra alla larghezza del contenuto (1980px, Impostazioni sito
   -> Layout) il margine non decide piu' niente: il contenuto e' centrato e il
   vuoto ai lati cresce da solo. Il numero qui sotto conta sotto ai 2076px.

   1980px e non 1280: sui monitor grandi il sito restava stretto come su un
   desktop normale (FEEDBACK 10). Il riferimento e' ROME Accessories, che
   allarga il contenuto fino a 1980px tenendo fissi caratteri e margini. */
body {
	--victrix-margine: 48px;
}

@media (max-width: 1024px) {
	body {
		--victrix-margine: 32px;
	}
}

@media (max-width: 767px) {
	body {
		--victrix-margine: 20px;
	}
}

/* Il "body" davanti non e' un vezzo: serve a pesare piu' della regola che
   Elementor scrive per la singola sezione, che altrimenti rimetterebbe il suo
   valore. E' il prezzo per avere una misura sola. */
body .e-con.e-parent.e-con-boxed {
	--padding-left: var(--victrix-margine);
	--padding-right: var(--victrix-margine);
}

/* Il contenuto della scheda di una carabina e' a sua volta fatto di sezioni
   Elementor, e per quelle sezioni la regola qui sopra vale lo stesso: si
   trovano dentro a un blocco che il margine ce l'ha gia', e ne aggiungevano un
   secondo. Sul telefono il testo delle specifiche partiva a quaranta punti
   invece che a venti, disallineato da tutto il resto della pagina. */
body .elementor-widget-theme-post-content .e-con.e-parent.e-con-boxed,
body .victrix-specifiche .e-con.e-parent.e-con-boxed {
	--padding-left: 0px;
	--padding-right: 0px;
}

/* I titoli display usano la spaziatura larga del progetto Figma. */
h1, h2, h3 {
	letter-spacing: 0.1em;
}

/* --- Scheda tecnica dei prodotti ---------------------------------------- */

.victrix-scheda {
	width: 100%;
	border-collapse: collapse;
}

.victrix-scheda th,
.victrix-scheda td {
	padding: 18px 0;
	border-bottom: 1px solid var(--victrix-border);
	text-align: left;
	vertical-align: top;
}

.victrix-scheda th {
	width: 30%;
	padding-right: 24px;
	color: var(--victrix-muted);
	font-family: var(--victrix-carattere);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.victrix-scheda td {
	color: var(--victrix-text);
}

@media (max-width: 767px) {
	.victrix-scheda,
	.victrix-scheda tbody,
	.victrix-scheda tr,
	.victrix-scheda th,
	.victrix-scheda td {
		display: block;
		width: auto;
	}

	.victrix-scheda th {
		padding-bottom: 6px;
		border-bottom: 0;
	}
}

/* ── Widget Slides + Video (portato da tema sibling) ── */
/* ── Slides Video widget ── */
.elementor-widget-victrix_slides_video .swiper-slide-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.elementor-widget-victrix_slides_video .elementor-background-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
}
.elementor-widget-victrix_slides_video .swiper-slide {
    position: relative;
    overflow: hidden;
}
.elementor-widget-victrix_slides_video .swiper-slide-inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.rsv-video-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1;
}
.rsv-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.rsv-iframe {
    width: 100vw;
    height: 56.25vw; /* 16:9 */
    min-height: 100%;
    min-width: 177.77vh; /* 16:9 */
    border: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1.2);
    top: 50%; left: 50%;
    position: absolute;
}

/* ── Widget Finiture: pastiglie colore e galleria per finitura ── */
.victrix-finiture-gallerie {
    position: relative;
}
.victrix-finiture-scatto {
    margin: 0;
}
.victrix-finiture-scatto img {
    display: block;
    width: 100%;
    height: auto;
}
.victrix-finiture .victrix-finiture-freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: 0;
    padding: 0 12px;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .65;
}
.victrix-finiture .victrix-finiture-freccia:hover {
    opacity: 1;
}
.victrix-finiture-prec { left: 0; }
.victrix-finiture-succ { right: 0; }

.victrix-finiture-comandi {
    text-align: center;
    margin-top: 18px;
}
.victrix-finiture-pastiglie {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.victrix-finiture .victrix-finitura-pastiglia {
    /* Il kit di Elementor stila tutti i button con una specificita' piu'
       alta di una classe sola, percio' la regola va annidata.
       Una misura di base serve comunque: il controllo Elementor emette la sua
       regola solo quando il valore e' stato salvato nel template. */
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    cursor: pointer;
    outline: 1px solid transparent;
    outline-offset: 3px;
}
.victrix-finiture .victrix-finitura-pastiglia[aria-pressed="true"] {
    outline-color: currentColor;
}
.victrix-finiture-nome {
    margin: 12px 0 0;
    font-size: 13px;
}
.victrix-finiture-contatore {
    margin: 6px 0 0;
    font-size: 12px;
    letter-spacing: 2px;
}

/* ── Widget Testata carabina: video o immagine a tutta pagina ── */
.victrix-testata {
    position: relative;
    overflow: hidden;
}
/* La parte a tutto schermo con il nome. La frase introduttiva, se c'e',
   viene sotto, sulla stessa foto (.victrix-testata-intro). */
.victrix-testata-schermo {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 80vh;
}
/* Il nome della testata va ripetuto due volte: Elementor scrive "img { height:
   auto }" con un selettore che pesa piu' di una classe sola, e la foto restava
   alta quanto viene, lasciando sotto una fascia nera — su telefono, dove la
   testata e' alta e la foto larga, era mezza schermata di niente. */
.victrix-testata .victrix-testata-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* La <picture> della foto verticale da telefono non deve fare da scatola:
   la foto si posiziona sulla testata come quando e' sola. */
.victrix-testata-foto {
    display: contents;
}
/* Media dedicati al telefono (testata e storytelling della scheda): due
   versioni dello stesso fondo, una per misura di schermo. Come la <picture>
   qui sopra non fanno da scatola: chi si vede si posiziona come se fosse solo. */
.victrix-solo-computer {
    display: contents;
}
.victrix-solo-telefono {
    display: none;
}
@media (max-width: 767px) {
    .victrix-solo-computer {
        display: none;
    }
    .victrix-solo-telefono {
        display: contents;
    }
}
.victrix-testata-velo {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .3;
    z-index: 1;
}
/* Con la frase introduttiva la foto prosegue sotto il nome e sfuma nel nero,
   come nell'anteprima della pagina prodotto: il testo resta leggibile e la
   sezione dopo attacca senza stacco. */
.victrix-testata--intro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, .55) 58%,
        rgba(0, 0, 0, .9) 78%,
        #000 92%,
        #000 100%);
}
.victrix-testata-intro {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 10vh 7vw;
    text-align: center;
    color: var(--victrix-text);
}
.victrix-testata-intro p {
    max-width: 820px;
    margin: 0 auto;
    font-size: clamp(20px, 2.3vw, 28px);
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: .01em;
    color: inherit;
}
.victrix-testata-intro p + p {
    margin-top: 1em;
}
.victrix-testata-contenuto {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    padding: 0 20px 8vh;
    color: var(--victrix-text);
}
.victrix-testata-nome {
    margin: 0;
    line-height: 1.05;
    /* Senza un limite eredita l'h1 del tema e straborda sui nomi lunghi. */
    font-size: clamp(32px, 6vw, 76px);
    letter-spacing: .04em;
}
.victrix-testata-sigla {
    margin: 8px 0 0;
    font-size: 13px;
    letter-spacing: 6px;
}
.victrix-testata-claim {
    margin: 18px 0 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.victrix-testata-wordmark {
    display: block;
    margin: 18px auto 0;
    max-width: 420px;
    height: auto;
}

.victrix-testata-logo {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

/* ── Widget Sezioni immagini: le fasce a tutta larghezza ── */
.victrix-sezione {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 72vh;
    padding: 6vh 6vw;
}
/* La foto su schermo grande: uno sfondo ritagliato. Sta su un figlio e non
   sulla sezione perche' sul telefono deve sparire del tutto, e uno stile
   scritto in linea — com'era — non si spegne da un foglio di stile senza
   ricorrere a !important. */
.victrix-sezione-sfondo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
/* L'effetto di scorrimento del sito attuale. Su touch i browser lo
   disegnano male (o lo ignorano), percio' vale solo da tablet in su. */
@media (min-width: 768px) {
    .victrix-sezione-fissa .victrix-sezione-sfondo { background-attachment: fixed; }
}
/* Il nastro che scorre: esiste solo sul telefono, e li' si accende. */
.victrix-sezione-nastro {
    display: none;
}
.victrix-sezione-velo {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .25;
    /* E' un velo, non un coperchio: sta sopra alla foto per scurirla, ma sul
       telefono sotto c'e' un nastro da far scorrere col dito, e un velo che
       intercetta il tocco lo bloccherebbe. */
    pointer-events: none;
}
.victrix-sezione-sinistra { justify-content: flex-start; text-align: left; }
.victrix-sezione-centro   { justify-content: center;     text-align: center; }
.victrix-sezione-destra   { justify-content: flex-end;   text-align: right; }
.victrix-sezione-testo {
    position: relative;
    z-index: 1;
    max-width: 460px;
    color: var(--victrix-text);
}
.victrix-sezione-titolo {
    margin: 0 0 14px;
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: .06em;
}
.victrix-sezione-sottotitolo {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
}

/* ── Widget Prezzi carabina ── */
.victrix-prezzi {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.victrix-prezzi-logo {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin-bottom: 10px;
}
.victrix-prezzo {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.victrix-prezzo-nome {
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7;
}
.victrix-prezzo-valore {
    font-size: 17px;
}
.victrix-prezzo-ue {
    font-size: 12px;
    opacity: .6;
}
.victrix-prezzi-nota {
    margin: 8px 0 0;
    font-size: 11px;
    opacity: .55;
}

/* Le due sezioni a cui punta la barra si fermano un po' prima, o la barra
   stessa coprirebbe il titolo appena raggiunto. Lo scorrimento morbido lo fa
   il JavaScript della barra sulle sue voci: messo qui su "html" varrebbe per
   ogni salto del sito, comprese le cose che Elementor scorre per conto suo. */
#gallery,
#specifiche {
    scroll-margin-top: 88px;
}

/* ── La barra che segue la lettura della scheda carabina ──
   Una pasticca scura appoggiata in alto, col nome del modello e le due
   scorciatoie. Il fondo e' semitrasparente con la sfocatura dietro, come sul
   sito attuale: sopra a una fotografia chiara le scritte restano leggibili
   senza dover coprire la foto con un rettangolo pieno. */
/* Larga quanto la finestra e col contenuto centrato dentro, invece che
   appoggiata a meta' schermo e tirata indietro di meta' se stessa: quel modo
   lascia alla pasticca solo la meta' destra dello schermo, e su un telefono
   le voci le uscivano fuori dal bordo. */
.victrix-menu-scheda {
    position: fixed;
    top: 24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    z-index: 60;
    pointer-events: none;
    /* Finche' la testata e' in vista la barra non c'e': "visibility" e non
       "display" perche' cosi' puo' comparire sfumando, e intanto resta fuori
       anche dai lettori di schermo — che con la sola trasparenza la
       leggerebbero lo stesso. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.victrix-menu-scheda.e-visibile {
    opacity: 1;
    visibility: visible;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .victrix-menu-scheda {
        transition: none;
        transform: none;
    }
}
body.admin-bar .victrix-menu-scheda {
    top: 56px;
}
.victrix-menu-scheda__barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 6px 18px;
    min-height: 40px;
    max-width: 100%;
    border-radius: var(--victrix-radius);
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
}
.victrix-menu-scheda__logo {
    display: block;
    width: auto;
    height: 26px;
}
.victrix-menu-scheda__nome {
    font-family: Augustus, var(--victrix-carattere);
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--victrix-text);
}
.victrix-menu-scheda__voce {
    font-family: var(--victrix-carattere);
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--victrix-text);
    opacity: .8;
    transition: opacity .2s ease;
}
.victrix-menu-scheda__voce:hover {
    opacity: 1;
    color: var(--victrix-text);
}
/* La freccia e' disegnata, non scritta: un carattere freccia cambia forma da
   un sistema all'altro, e qui accanto a due parole in maiuscoletto si nota. */
.victrix-menu-scheda .victrix-menu-scheda__su,
.victrix-menu-scheda .victrix-menu-scheda__su:hover,
.victrix-menu-scheda .victrix-menu-scheda__su:focus {
    position: relative;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    opacity: .8;
}
.victrix-menu-scheda .victrix-menu-scheda__su:hover {
    opacity: 1;
}
.victrix-menu-scheda__su::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 1px;
    height: 14px;
    background: var(--victrix-text);
    transform: translateX(-50%);
}
.victrix-menu-scheda__su::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--victrix-text);
    border-left: 1px solid var(--victrix-text);
    transform: translateX(-50%) rotate(45deg);
}
.victrix-menu-scheda .victrix-menu-scheda__su:focus-visible {
    outline: 1px solid var(--victrix-text);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .victrix-menu-scheda__barra {
        gap: 18px;
        padding: 5px 14px;
    }
    .victrix-menu-scheda__voce {
        font-size: 11px;
        letter-spacing: 1.2px;
    }
}

/* ── Widget Galleria carabina ── */
.victrix-galleria-titolo {
    text-align: center;
    letter-spacing: 4px;
    margin: 0 0 24px;
}
.victrix-galleria-filtri {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
}
/* Il kit di Elementor stila tutti i button con una specificita' piu' alta di
   una classe sola: la regola va annidata o non arriva. */
.victrix-galleria .victrix-galleria-filtro {
    background: none;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 7px 20px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: inherit;
    opacity: .55;
    cursor: pointer;
}
.victrix-galleria .victrix-galleria-filtro:hover { opacity: .85; }
.victrix-galleria .victrix-galleria-filtro[aria-pressed="true"] { opacity: 1; }
/* Quante colonne e quanta distanza lo dicono i controlli del widget, non
   questo foglio: la regola che Elementor scrive per un controllo pesa piu' di
   una classe, quindi da qui non arriverebbe. */
.victrix-galleria-griglia {
    display: grid;
}
/* Quadrati, come sul sito attuale: la griglia del live e' di tessere 428x428
   con venti punti di distanza, e il taglio quadrato e' quello che tiene in
   riga foto girate per il lungo e foto girate per l'alto. */
.victrix-galleria-scatto {
    position: relative;
    display: block;
}
/* Il filtro per variante nasconde le tessere con l'attributo "hidden", che il
   browser traduce in display:none — ma con una regola che pesa quanto la
   nostra e viene prima, quindi il display:block qui sopra la batteva e il
   filtro sembrava non fare niente. Va detto a mano. */
.victrix-galleria-scatto[hidden] {
    display: none;
}
.victrix-galleria-scatto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}
@media (max-width: 767px) {
    .victrix-sezione { min-height: 46vh; padding: 5vh 24px; }

    /* Sul telefono la foto non si ritaglia: si scorre. Lo sfondo si spegne —
       e cosi' il browser non lo scarica nemmeno — e al suo posto si accende
       il nastro, che tiene la foto alta quanto la fascia e larga quanto le
       serve. La barra di scorrimento e' quella del menu: basta la classe
       victrix-scorre, il resto lo fa assets/js/scorrimento.js. */
    .victrix-sezione-sfondo {
        display: none;
    }
    /* Il nome della sezione davanti al nastro non e' un vezzo: SimpleBar mette
       "position: relative" su ogni elemento che avvolge, e il suo foglio di
       stile viene caricato dopo il nostro. Con una classe sola la nostra
       regola perdeva e il nastro restava alto zero. */
    .victrix-sezione .victrix-sezione-nastro {
        display: block;
        position: absolute;
        inset: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }
    /* Anche qui il nome doppio: Elementor veste tutte le immagini con
       "max-width: 100%; height: auto", e una classe sola non basta a
       ribaltarlo. La foto sta alta quanto la fascia e larga quanto le serve. */
    .victrix-sezione .victrix-sezione-foto {
        display: block;
        width: auto;
        max-width: none;
        height: 100%;
    }
    /* SimpleBar sposta il contenuto dentro ai suoi involucri: la foto deve
       restare alta quanto il nastro anche li' dentro. */
    .victrix-sezione .simplebar-content,
    .victrix-sezione .simplebar-content-wrapper,
    .victrix-sezione .simplebar-mask,
    .victrix-sezione .simplebar-offset,
    .victrix-sezione .simplebar-wrapper {
        height: 100%;
    }
    /* La barra sta appoggiata in basso, dentro alla fascia, e non deve
       sparire: e' l'unico segno che dice che la foto continua. Piu' carica di
       quella del menu — li' sta su un fondo nero, qui su una fotografia, e a
       diciotto centesimi non si vedrebbe. */
    .victrix-sezione .simplebar-track.simplebar-horizontal {
        bottom: 6px;
        left: 24px;
        right: 24px;
        height: 10px;
    }
    .victrix-sezione .simplebar-scrollbar::before,
    .victrix-sezione .simplebar-scrollbar.simplebar-visible::before {
        background: var(--victrix-text);
        border-radius: 2px;
        top: 3px;
        bottom: 3px;
        opacity: .45;
    }
}

/* ── News ── */

/* Gli articoli arrivano dall'editor a blocchi del sito attuale, che usa <mark>
   per colorare una parola. Il browser gliela mette su fondo giallo; qui il
   colore e' gia' dichiarato dalla classe di WordPress, lo sfondo va tolto. */
.elementor-widget-theme-post-content mark {
    background: none;
    color: inherit;
}

/* Il ritorno all'archivio: stesso disegno dei bottoni del kit, ma il widget
   non e' un bottone di Elementor e non ne eredita lo stile. */
.victrix-ritorno {
    display: flex;
    margin: 0;
}
.victrix-ritorno a {
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid var(--victrix-border);
    border-radius: 10px;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}
.victrix-ritorno a:hover {
    background: var(--victrix-text);
    color: var(--victrix-bg);
    border-color: var(--victrix-text);
}

/* Le card dell'archivio: la miniatura riempie il suo riquadro invece di
   lasciare buchi quando le proporzioni non coincidono. */
.elementor-widget-loop-grid .elementor-widget-theme-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* ── Widget Rivenditori ── */
.victrix-rivenditori-gruppo {
    margin: 0 0 26px;
    font-size: 15px;
    letter-spacing: 4px;
}
/* Spazio fra un gruppo e l'altro, contando solo i gruppi rimasti visibili
   dopo una ricerca (assets/js/cerca-rivenditori.js). */
.victrix-rivenditori-blocco:not([hidden]) ~ .victrix-rivenditori-blocco .victrix-rivenditori-gruppo {
    margin-top: 64px;
}
.victrix-rivenditori-griglia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.victrix-rivenditore {
    padding: 26px 24px;
    border: 1px solid var(--victrix-border);
    border-radius: var(--victrix-radius);
    background: var(--victrix-surface);
}
.victrix-rivenditore-nome {
    margin: 0 0 12px;
    font-size: 16px;
    letter-spacing: .04em;
}
/* Due colonne come nel Figma: a sinistra dove si trova il rivenditore, a
   destra come lo si raggiunge. Quando la scheda si stringe tornano una sopra
   l'altra da se', senza un punto di rottura da tenere allineato. */
.victrix-rivenditore-corpo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-start;
}
.victrix-rivenditore-dove {
    flex: 1 1 150px;
    min-width: 0;
}
/* Senza questo una mail lunga come gallery@berettaargentina.com.ar allarga la
   colonna dei contatti finche' non c'e' piu' posto, e quella scheda passa da
   due colonne a una mentre le vicine restano a due: in una griglia si legge
   come un difetto. Cosi' la mail va a capo dentro la sua colonna. */
.victrix-rivenditore-corpo .victrix-contatti {
    flex: 1 1 150px;
    min-width: 0;
}
.victrix-rivenditore-sito,
.victrix-rivenditore-indirizzo {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--victrix-muted);
}
.victrix-rivenditore-sito:last-child,
.victrix-rivenditore-indirizzo:last-child {
    margin-bottom: 0;
}

/* ── Contatti col segno ──
   Telefono ed email, nel Figma, non sono righe di testo: sono una pastiglia
   tonda con dentro un disegno e accanto il valore. Le stesse regole valgono
   nell'elenco dei rivenditori e nella scheda che si apre sulla mappa. */
.victrix-contatti {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.victrix-contatto {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--victrix-muted);
    text-decoration: none;
}
.victrix-contatto-segno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--victrix-text);
    transition: background .2s ease, color .2s ease;
}
.victrix-contatto-segno svg {
    width: 16px;
    height: 16px;
}
.victrix-contatto-valore {
    border-bottom: 1px solid transparent;
    overflow-wrap: anywhere;
}
/* Un numero spezzato a meta' non si legge piu' come un numero. Il piu' lungo
   che abbiamo e' di diciotto caratteri e ci sta comodo anche nella scheda
   piu' stretta, quindi non va mai a capo. */
.victrix-contatto-telefono .victrix-contatto-valore {
    white-space: nowrap;
}
/* Nel Figma il sito e l'email sono sottolineati, il numero no. Con una
   sottolineatura vera e non col bordo: il valore sta in una riga flessibile,
   e quando una mail lunga va a capo il bordo restava uno solo, sotto tutto il
   blocco, invece di seguire le righe. */
.victrix-contatto-email .victrix-contatto-valore,
.victrix-contatto-sito .victrix-contatto-valore {
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
/* Il sito non ha la pastiglia (vedi sotto): e' testo e basta, e va a capo
   come il testo. */
.victrix-rivenditore-sito .victrix-contatto-sito,
.victrix-mappa-sito .victrix-contatto-sito {
    display: inline;
}
.victrix-contatto:hover {
    color: var(--victrix-text);
}
.victrix-contatto:hover .victrix-contatto-segno {
    background: var(--victrix-text);
    color: var(--victrix-bg);
}

/* Il sito sta sotto il nome, dove lo mette il Figma: li' la pastiglia
   ruberebbe spazio all'indirizzo, quindi resta solo il testo. */
.victrix-rivenditore-sito .victrix-contatto-segno,
.victrix-mappa-sito .victrix-contatto-segno {
    display: none;
}

/* Detto a chi legge con uno screen reader, tolto a chi guarda: il nome del
   campo, che l'icona da sola non pronuncia. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Widget Posizioni aperte ── */
.victrix-posizioni {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.victrix-posizione {
    display: flex;
    gap: 28px;
    align-items: stretch;
    border: 1px solid var(--victrix-border);
    border-radius: var(--victrix-radius);
    overflow: hidden;
    background: var(--victrix-surface);
}
.victrix-posizione-foto {
    flex: 0 0 30%;
    display: block;
}
.victrix-posizione-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.victrix-posizione-testo {
    flex: 1 1 auto;
    padding: 28px 28px 28px 0;
}
.victrix-posizione-dati {
    margin: 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--victrix-muted);
}
.victrix-posizione-titolo {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.2;
}
.victrix-posizione-titolo a,
.victrix-posizione-vai a {
    color: inherit;
    text-decoration: none;
}
.victrix-posizione-titolo a:hover { opacity: .8; }
.victrix-posizione-area {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--victrix-muted);
}
.victrix-posizione-estratto {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--victrix-muted);
}
.victrix-posizione-vai a {
    font-size: 11px;
    letter-spacing: .16em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}
.victrix-posizioni-vuoto {
    color: var(--victrix-muted);
}

@media (max-width: 767px) {
    .victrix-rivenditori-griglia { grid-template-columns: 1fr; }
    .victrix-posizione { flex-direction: column; gap: 0; }
    .victrix-posizione-foto { flex: 0 0 auto; aspect-ratio: 16 / 9; }
    .victrix-posizione-testo { padding: 24px; }
}

/* La sigla del paese sopra il nome, sui distributori internazionali. */
.victrix-rivenditore-paese {
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--victrix-muted);
}

/* ── Le icone SVG dentro i widget di Elementor ──
   Elementor colora le icone con "fill: currentColor" dal foglio di stile, e la
   CSS batte l'attributo scritto dentro al file: le nostre icone di contorno —
   la lente, la persona — venivano riempite e diventavano due macchie. Qui si
   dice che una forma che ha un contorno e non dichiara un riempimento non va
   riempita. Le forme piene, come le due barre del menu, il loro fill lo
   dichiarano e restano come sono. */
.elementor-icon svg [stroke]:not([fill]) {
    fill: none;
}

/* ── I pannelli di vetro ──
   Il menu e la ricerca sono due popup diversi con lo stesso vestito: qui c'e'
   il vestito, e ognuno dei due ci mette dentro la sua struttura. La classe
   "victrix-pannello" e' quella che glielo da'.

   Nel Figma il menu non e' un cassetto agganciato al bordo ma un pannello che
   galleggia sopra la pagina. Quello che lo fa galleggiare non e' la posizione:
   e' il vetro smerigliato — il fondo quasi trasparente lascia intravedere la
   pagina, e la sfocatura la allontana. Senza, resta un rettangolo scuro
   appiccicato sopra.

   La sfocatura e' la stessa idea del menu di Rome Accessories, che al
   committente piace; li' era scritta a mano nel CSS del popup, qui sta nel
   tema dove si trova. */
.victrix-pannello .dialog-widget-content {
    backdrop-filter: blur(40px) saturate(120%);
    -webkit-backdrop-filter: blur(40px) saturate(120%);
    /* Un alone largo e appena percettibile: stacca il pannello dal nero della
       pagina senza disegnargli un bordo luminoso intorno. */
    box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 160px 40px rgba(255, 255, 255, .04);
}
/* ── I fili del pannello ──
   Prima qui c'era una fascia chiara che girava lungo il bordo (gradiente
   conico animato). La revisione di Marika chiede le linee della bozza Figma,
   e nel Figma il pannello del menu ha un bordo pieno scuro — #424242 (sul sito #343434, il colore
   dei bordi, dalle impostazioni del popup) — piu' due fili chiari: uno sul lato di sopra
   e uno sul lato sinistro, tutti e due sfumati alle estremita' (pieni fra il
   20 e l'80 per cento, come ogni linea della bozza).

   I due fili sono due sfondi dello stesso riquadro sovrapposto: uno alto un
   pixel e largo quanto il pannello, l'altro largo un pixel e alto quanto il
   pannello. Le estremita' trasparenti fanno si' che negli angoli tondi non si
   veda il segno dritto che esce dalla curva. */
.victrix-pannello .dialog-widget-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .7) 20%, rgba(255, 255, 255, .7) 80%, transparent) top left / 100% 1px no-repeat,
        linear-gradient(180deg, transparent, rgba(255, 255, 255, .7) 20%, rgba(255, 255, 255, .7) 80%, transparent) top left / 1px 100% no-repeat;
    /* Non deve rubare i click alle voci sotto. */
    pointer-events: none;
}

/* Perche' l'angolo si possa animare va dichiarato come angolo: una variabile
   normale il browser la tratta come testo e passerebbe di scatto da un valore
   all'altro invece di girare. Il pannello non gira piu', ma il bordo vivo delle
   schede (.victrix-bordo) si'. */
@property --victrix-giro {
    syntax: "<angle>";
    inherits: false;
    initial-value: 200deg;
}
@keyframes victrix-giro {
    to { --victrix-giro: 560deg; }
}

/* Chi non ha la sfocatura (browser vecchi) vedrebbe attraverso un fondo quasi
   trasparente, e il menu diventerebbe illeggibile sopra una foto: li' il
   pannello torna pieno. */
@supports not (backdrop-filter: blur(1px)) {
    .victrix-pannello .dialog-widget-content {
        background-color: var(--victrix-bg) !important;
    }
}
/* Fra la scatola del popup e il nostro contenuto Elementor infila un suo
   involucro, che nasce "display: block": dentro a una colonna flessibile un
   blocco non si lascia stringere e cresce quanto il contenuto, portandosi
   dietro tutto. Senza questa riga l'elenco non scorreva e a scorrere tornava
   il pannello intero. */
.victrix-pannello .dialog-message > .elementor {
    /* L'altezza esplicita e' quello che conta: da' al contenuto dentro una
       misura definita contro cui calcolarsi, che e' la condizione perche' una
       colonna flessibile possa poi stringere l'elenco. */
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* Il corpo del pannello: tre fasce, alte quanto il popup.
   E' una griglia e non una colonna flessibile, e la differenza conta. In flex
   la fascia centrale ha un'altezza che si ricava per sottrazione, e finche' il
   calcolo non si e' dipanato l'elemento risulta alto quanto il suo contenuto:
   una libreria che lo misura in quel momento conclude che non c'e' niente da
   scorrere. Con grid la riga centrale e' 1fr — una misura vera dal primo
   istante — e chi la misura trova il numero giusto. */
.victrix-menu .victrix-menu-corpo {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    flex: 1;
    min-height: 0;
}
/* L'elenco in mezzo si prende quello che avanza, e li' dentro scorre.
   min-height: 0 non e' un dettaglio: senza, dentro a una colonna flessibile
   un figlio non scende mai sotto la sua altezza naturale e a scorrere
   tornerebbe tutto il pannello. */
/* L'involucro che scorre: si prende lo spazio che avanza, e sta a blocco
   perche' SimpleBar ci costruisce dentro la sua struttura e un contenitore
   flessibile gliela scompagina. Lo scorrimento non si dichiara qui: lo
   gestisce lei. */
.victrix-menu .victrix-scorre {
    display: block;
    /* Nella griglia e' la riga 1fr: l'altezza ce l'ha, non se la deve
       contendere. min-height: 0 serve lo stesso, o la riga non scende sotto
       il suo contenuto. */
    min-height: 0;
}
.victrix-menu .victrix-menu-voci {
    /* Dentro all'involucro torna a essere quello che e': una colonna. */
}
/* La riga in cima lascia posto alla crocetta, che sta sopra a sinistra. */
.victrix-menu .victrix-menu-cima {
    padding-left: 34px;
}

/* La crocetta di chiusura, in alto a destra dentro al pannello.
   Elementor la disegna con un <use> che punta a uno sprite di icone: sul
   frontend quello sprite non c'e', e al suo posto resta un quadrato vuoto.
   Quindi il suo segno si nasconde e la croce la si fa qui, con due tratti.

   La crocetta la stampa Elementor fuori dal contenuto e la appoggia al
   pannello: per stare in riga con il marchio e le lingue deve sapere di
   quanto il contenuto e' rientrato. Sono le stesse misure che il contenitore
   .victrix-menu-corpo ha nel costruttore (tools/design-testata.php), ripetute
   qui perche' da li' non arrivano. */
.victrix-pannello {
    --victrix-menu-orlo: 38px;
    --victrix-menu-orlo-alto: 34px;
}
@media (max-width: 767px) {
    .victrix-pannello {
        --victrix-menu-orlo: 24px;
        --victrix-menu-orlo-alto: 24px;
    }
}
.victrix-pannello .dialog-close-button {
    /* Nel Figma sta a sinistra, non a destra: li' a destra ci sono le sigle
       delle lingue, e le due cose si sovrapponevano.
       La riga in cima e' alta quanto il marchio, 26 punti; la crocetta e' 22,
       quindi scende di due per restarci in mezzo. */
    top: calc(var(--victrix-menu-orlo-alto) + 2px);
    right: auto;
    left: var(--victrix-menu-orlo);
    width: 22px;
    height: 22px;
    color: var(--victrix-muted);
    transition: color .2s ease;
}
.victrix-pannello .dialog-close-button svg,
.victrix-pannello .dialog-close-button i {
    display: none;
}
.victrix-pannello .dialog-close-button::before,
.victrix-pannello .dialog-close-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 1px;
    background: currentColor;
}
.victrix-pannello .dialog-close-button::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.victrix-pannello .dialog-close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.victrix-pannello .dialog-close-button:hover {
    color: var(--victrix-text);
}
/* Cliccandola, il browser le mette intorno il suo alone bianco quadrato: su un
   pannello di vetro sembra un riquadro rotto. Il segno di fuoco serve a chi
   naviga da tastiera, quindi non si toglie — si riscrive, e si mostra solo
   quando il fuoco arriva davvero dalla tastiera. */
.victrix-pannello .dialog-close-button:focus {
    outline: none;
    box-shadow: none;
}
.victrix-pannello .dialog-close-button:focus-visible {
    outline: 1px solid var(--victrix-text);
    outline-offset: 6px;
    border-radius: 2px;
}
/* Il pannello e' alto quanto serve ma non piu' dello schermo: se le voci
   crescono, scorre dentro invece di uscire dal basso. */
/* ── Cosa scorre e cosa no ──
   Prima scorreva tutto il pannello: cercando una voce in fondo si perdevano di
   vista il marchio, le lingue e i social. Ora il pannello e' una colonna alta
   quanto il popup, in cui la fascia in cima e quella in fondo stanno ferme e a
   scorrere e' solo l'elenco in mezzo. */
.victrix-menu .dialog-message {
    display: flex;
    height: 100%;
    /* Questo scorreva: adesso deve solo contenere. */
    overflow: hidden;
    /* La barra di sistema, larga e chiara, su un pannello di vetro stona:
       qui diventa un filo appena visibile. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

/* ── La ricerca ──
   Il popup e' piccolo: una riga sola, il campo e la crocetta. Il vestito lo
   porta da "victrix-pannello"; qui c'e' solo cio' in cui differisce dal menu. */
.victrix-pannello.victrix-ricerca .dialog-message {
    display: flex;
    align-items: center;
    padding: 0 24px;
}
.victrix-ricerca .dialog-message > .elementor {
    display: flex;
    align-items: center;
    width: 100%;
    /* Spazio a destra per la crocetta, o il campo le passa sotto. */
    padding-right: 46px;
}
/* Il container dentro all'involucro: largo quanto c'e' e centrato in altezza,
   o il campo resta appeso in cima con il vuoto sotto. */
.victrix-ricerca .dialog-message > .elementor,
.victrix-ricerca .dialog-message > .elementor > .e-con,
.victrix-ricerca .dialog-message > .elementor > .e-con > .e-con-inner {
    width: 100%;
    height: 100%;
    justify-content: center;
}
/* Cliccando nel campo il browser gli mette intorno il suo alone bianco. Il
   segno di fuoco resta — serve a chi naviga da tastiera — ma coi colori del
   sito, e solo quando il fuoco arriva davvero dalla tastiera. */
/* Il riquadro non prende l'alone del browser: che la cornice schiarisca lo
   dice il widget, con il colore di fuoco preso dai globali. */
.victrix-ricerca .elementor-search-form__container:focus-within {
    outline: none;
}
.victrix-ricerca input[name="s"]:focus {
    outline: none;
    box-shadow: none;
}
.victrix-ricerca input[name="s"]:focus-visible {
    outline: 1px solid var(--victrix-text);
    outline-offset: 2px;
}
/* Nel menu la crocetta sta in alto a sinistra, che e' dove la mette il Figma.
   Qui a sinistra c'e' il campo: torna a destra, in mezzo all'altezza. */
.victrix-ricerca .dialog-close-button {
    top: 50%;
    left: auto;
    right: 26px;
    transform: translateY(-50%);
}
/* Il campo e il bottone del widget Ricerca di Elementor, vestiti come i campi
   dei nostri moduli. */
/* Una cornice sola.

   Se ne vedevano due appiccicate, con due raggi diversi: quella del riquadro —
   dentro ci stanno il campo e la lente — e quella del campo, che il kit mette
   a ogni input del sito. La cornice buona e' quella del riquadro, e da oggi la
   disegna il widget (impostazioni Input, in Elementor): il tema non ce la
   faceva a superare il peso delle regole che Elementor scrive per un widget.

   Qui resta solo da togliere quella del campo. La scorciatoia
   ".victrix-ricerca .elementor-search-form__input" non bastava: la regola del
   kit vale di piu'. Nominare il tipo dell'input pareggia il conto. */
.victrix-ricerca .elementor-search-form input[type="search"] {
    color: var(--victrix-text);
    font-family: var(--victrix-carattere);
    font-size: 13px;
    letter-spacing: 1.2px;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.victrix-ricerca .elementor-search-form__input::placeholder {
    color: var(--victrix-muted);
}
.victrix-ricerca .elementor-search-form__submit {
    background: none;
    color: var(--victrix-muted);
    transition: color .2s ease;
}
.victrix-ricerca .elementor-search-form__submit:hover {
    color: var(--victrix-text);
}

/* ── I risultati della ricerca ──
   Una riga per risultato: che cos'e', come si chiama, e due dati per capire se
   e' quello giusto. Niente estratti e niente immagini: la pagina serve ad
   andare altrove, non a farsi leggere. */
.victrix-risultati {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--victrix-border);
}
.victrix-risultato {
    border-bottom: 1px solid var(--victrix-border);
}
.victrix-risultato-link {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: baseline;
    gap: 8px 24px;
    padding: 20px 0;
    text-decoration: none;
    color: var(--victrix-text);
    transition: opacity .2s ease;
}
.victrix-risultato-link:hover {
    opacity: .62;
}
.victrix-risultato-tipo {
    font-family: var(--victrix-carattere);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--victrix-muted);
}
.victrix-risultato-titolo {
    font-size: 17px;
    line-height: 1.4;
}
.victrix-risultato-dati {
    font-family: var(--victrix-carattere);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--victrix-muted);
    white-space: nowrap;
}
/* Su schermo stretto le tre colonne diventano una: il tipo sopra, il titolo e
   i dati sotto. */
@media (max-width: 767px) {
    .victrix-risultato-link {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 16px 0;
    }
    .victrix-risultato-dati {
        white-space: normal;
    }
}

.victrix-ricerca-vuota {
    padding: 40px 0;
}
.victrix-ricerca-niente {
    margin: 0 0 8px;
    font-size: 17px;
}
.victrix-ricerca-consiglio {
    margin: 0;
    font-size: 13px;
    color: var(--victrix-muted);
}

.victrix-risultati-pagine {
    margin-top: 36px;
}
.victrix-risultati-pagine .page-numbers {
    padding: 6px 10px;
    font-family: var(--victrix-carattere);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--victrix-muted);
    text-decoration: none;
}
.victrix-risultati-pagine .page-numbers.current,
.victrix-risultati-pagine a.page-numbers:hover {
    color: var(--victrix-text);
}
.victrix-risultati-pagine .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* ── La barra di scorrimento ──
   SimpleBar disegna la barra con elementi normali: da qui in poi e' CSS come
   qualunque altra cosa. Sottile, chiara, senza frecce. */
.victrix-pannello .simplebar-track.simplebar-vertical {
    width: 10px;
}
.victrix-pannello .simplebar-scrollbar::before {
    background: var(--victrix-text);
    border-radius: 2px;
    left: 3px;
    right: 3px;
    opacity: .18;
    transition: opacity .2s ease;
}
/* Sempre visibile finche' c'e' da scorrere: su un menu la barra dice che sotto
   c'e' dell'altro, e sparire toglierebbe proprio quell'informazione. */
.victrix-pannello .simplebar-scrollbar.simplebar-visible::before {
    opacity: .18;
}
.victrix-pannello .simplebar-track:hover .simplebar-scrollbar::before {
    opacity: .38;
}

/* ── Le sigle delle lingue, nel menu ──
   Due parole di due lettere: quella attiva accesa, l'altra spenta. */
.victrix-lingue {
    display: inline-flex;
    gap: 10px;
}
.victrix-lingua {
    font-family: var(--victrix-carattere);
    font-size: 12px;
    letter-spacing: 1.2px;
    line-height: 1.4;
    color: var(--victrix-muted);
    text-decoration: none;
    transition: color .2s ease;
}
.victrix-lingua:hover {
    color: var(--victrix-text);
}
.victrix-lingua-attiva {
    color: var(--victrix-text);
}

/* ── L'allineamento delle icone social ──
   Il controllo "Allineamento" del widget Social Icons aggiunge la classe
   e-grid-align-*, ma la regola che la traduce in un allineamento vero Elementor
   la spedisce solo nel foglio condizionale per WebKit: su Chrome e Firefox il
   controllo non fa niente e le icone restano centrate qualunque cosa si
   scelga. Qui si scrive la traduzione mancante, una volta per tutto il sito. */
.e-grid-align-left { --justify-content: flex-start; }
.e-grid-align-center { --justify-content: center; }
.e-grid-align-right { --justify-content: flex-end; }
@media (max-width: 1024px) {
    .e-grid-align-tablet-left { --justify-content: flex-start; }
    .e-grid-align-tablet-center { --justify-content: center; }
    .e-grid-align-tablet-right { --justify-content: flex-end; }
}
@media (max-width: 767px) {
    .e-grid-align-mobile-left { --justify-content: flex-start; }
    .e-grid-align-mobile-center { --justify-content: center; }
    .e-grid-align-mobile-right { --justify-content: flex-end; }
}

/* ── Iscrizione alla newsletter nel pie' ──
   Nel Figma non sono un campo e un bottone affiancati: e' una pastiglia sola
   con la freccia dentro, appoggiata al bordo destro. Elementor il bottone lo
   mette per forza in fondo alla fila dei campi, quindi lo si stacca dal flusso
   e lo si appoggia sopra al campo. */
.victrix-newsletter .elementor-form {
    position: relative;
}
.victrix-newsletter .elementor-field-type-submit {
    position: absolute;
    right: 0;
    /* Da cima a fondo del campo, non appoggiata al fondo: ancorata solo in
       basso la freccia restava dieci pixel sotto il centro. */
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    width: auto;
    padding: 0;
}
.victrix-newsletter .elementor-field-type-submit button {
    min-width: 0;
    height: 100%;
    padding: 0 18px;
    border: 0;
    border-radius: 0 var(--victrix-radius) var(--victrix-radius) 0;
    background: none;
    color: var(--victrix-muted);
    /* La freccia e' un segno, non una parola: piu' grande del testo di
       contorno e senza la spaziatura delle etichette. */
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    transition: color .2s ease;
}
.victrix-newsletter .elementor-field-type-submit button:hover {
    background: none;
    color: var(--victrix-text);
}
/* Spazio a destra dentro al campo, o il testo scorre sotto la freccia. */
.victrix-newsletter input[type="email"] {
    padding-right: 52px;
}

/* ── La spunta di consenso sotto i moduli ──
   Piccola e grigia come la riga del Figma, ma cliccabile: il quadratino sta
   in alto accanto alla prima riga anche quando il testo va a capo, e non al
   centro di un blocco di due righe. */
.elementor-field-type-acceptance .elementor-field-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.elementor-field-type-acceptance input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 2px 0 0;
    accent-color: var(--victrix-text);
    cursor: pointer;
}
/* Non "label" e basta: Elementor ne stampa due, e la prima e' il nome del
   campo, nascosto a schermo e lasciato agli screen reader.
   Il selettore e' lungo perche' deve battere due regole del kit, scritte in
   linea e quindi caricate dopo di noi: una mette in maiuscolo ogni label del
   sito — su una frase intera diventa un grido — e l'altra le riporta al corpo
   del testo. */
.elementor-widget-form .elementor-field-subgroup .elementor-field-option label {
    margin: 0;
    font-family: var(--victrix-carattere);
    font-size: 11px;
    line-height: 1.6;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--victrix-muted);
    cursor: pointer;
}
.elementor-widget-form .elementor-field-subgroup .elementor-field-option label a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.elementor-widget-form .elementor-field-subgroup .elementor-field-option label a:hover {
    color: var(--victrix-text);
}

/* ── Il campo con cui si allega il curriculum ──
   Il controllo file lo disegna il browser, e nasce chiaro: senza una mano
   resta una scatola grigia in mezzo ai campi scuri del modulo. Qui prende la
   stessa cornice degli altri e il bottoncino interno diventa una pasticca
   come le altre del sito. */
.elementor-field-type-upload input[type="file"] {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--victrix-border);
    border-radius: var(--victrix-radius);
    background: var(--victrix-surface);
    font-family: var(--victrix-carattere);
    font-size: 13px;
    color: var(--victrix-muted);
    cursor: pointer;
}
.elementor-field-type-upload input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 7px 16px;
    border: 1px solid var(--victrix-border);
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--victrix-text);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.elementor-field-type-upload input[type="file"]:hover::file-selector-button {
    background: var(--victrix-text);
    color: var(--victrix-bg);
}

/* Nei moduli del sito le etichette sono spente e parla il segnaposto; il
   controllo file il segnaposto non ce l'ha, quindi la sua etichetta torna a
   vedersi. Elementor la nasconde con .elementor-screen-only, che e' la solita
   scatoletta da un pixel ritagliata: per rimetterla a schermo vanno sciolte
   tutte le sue proprieta', non basta cambiare position. */
.elementor-field-type-upload > label.elementor-field-label.elementor-screen-only {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 8px;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-family: var(--victrix-carattere);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .4px;
    text-transform: none;
    color: var(--victrix-muted);
}

/* ── Mappa dei rivenditori ── */
.victrix-mappa {
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--victrix-border);
    border-radius: var(--victrix-radius);
    overflow: hidden;
    background: #e9e9e9;
    z-index: 0; /* o le mattonelle scavalcano l'header fisso */
}

/* Le mattonelle di Esri sono gia' quasi grigie: il filtro toglie il poco
   colore che resta e schiarisce, per arrivare al grigio piatto dello
   screenshot Figma. */
.victrix-mappa .leaflet-tile-pane {
    filter: grayscale(1) contrast(0.92) brightness(1.04);
}

/* Cliccando la mappa, Leaflet le mette intorno un alone bianco di quattro
   pixel: su fondo nero sembra una seconda cornice storta. Il segno di fuoco
   serve a chi naviga da tastiera, quindi non si toglie, si riscrive con i
   colori del sito. */
.victrix-mappa.leaflet-container:focus,
.victrix-mappa.leaflet-container:focus-visible {
    outline: 1px solid var(--victrix-text);
    outline-offset: -1px;
    box-shadow: none;
}

/* Il segnaposto: una pastiglia scura con dentro la sigla, come nel Figma. */
.victrix-mappa-segno {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.victrix-mappa-segno span {
    display: inline-block;
    transform: translate(-50%, -50%);
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--victrix-surface);
    color: var(--victrix-text);
    font-family: var(--victrix-carattere);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    cursor: pointer;
}
.victrix-mappa-segno:hover span,
.leaflet-marker-icon.victrix-mappa-segno:focus span {
    background: var(--victrix-text);
    color: var(--victrix-bg);
}

/* La scheda che si apre: quella del Figma, sul fondo scuro del sito. */
.victrix-mappa-popup .leaflet-popup-content-wrapper {
    background: var(--victrix-surface);
    color: var(--victrix-text);
    border: 1px solid var(--victrix-border);
    border-radius: var(--victrix-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.victrix-mappa-popup .leaflet-popup-tip {
    background: var(--victrix-surface);
    border: 1px solid var(--victrix-border);
}
.victrix-mappa-popup .leaflet-popup-content {
    margin: 16px 18px;
}
.victrix-mappa-popup a.leaflet-popup-close-button {
    color: var(--victrix-muted);
}
.victrix-mappa-popup a.leaflet-popup-close-button:hover {
    color: var(--victrix-text);
}
.victrix-mappa-scheda h3 {
    margin: 0 0 8px;
    font-size: 15px;
    letter-spacing: .04em;
}
.victrix-mappa-sito,
.victrix-mappa-dove {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--victrix-muted);
}
/* Il foglio di Leaflet viene caricato dopo il nostro e tinge di azzurro ogni
   link dentro la mappa; le regole qui sotto sono legate anche al contenitore
   della scheda, che basta a farle valere senza ricorrere a !important. */
.victrix-mappa-popup .victrix-contatto {
    color: var(--victrix-muted);
    text-decoration: none;
}
.victrix-mappa-popup .victrix-contatto:hover {
    color: var(--victrix-text);
}
/* Nella scheda della mappa lo spazio e' poco: pastiglie piu' piccole. */
.victrix-mappa-popup .victrix-contatti {
    gap: 8px;
}
.victrix-mappa-popup .victrix-contatto-segno {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, .1);
}
.victrix-mappa-popup .victrix-contatto-segno svg {
    width: 14px;
    height: 14px;
}

/* L'attribuzione: piccola e discreta, ma leggibile. */
.victrix-mappa .leaflet-control-attribution {
    background: rgba(255, 255, 255, .82);
    font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA HOME
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La testata sopra la prima immagine ──
   Nel Figma la home comincia dall'immagine, e il menu, il logo e le icone ci
   stanno sopra: la fascia scura della testata non c'e'. Per ottenerlo la
   testata esce dal flusso — cosi' la pagina parte da zero e l'immagine le
   passa sotto — e perde il suo fondo.

   Vale sulla home e sulle pagine di linea, cioe' dove sotto c'e' una fascia
   con la foto: la home si riconosce dalla classe che ci mette WordPress, la
   pagina di linea dal fatto che la fascia c'e'. Chiederlo alla pagina invece
   che all'indirizzo e' piu' robusto — una linea in piu' non richiede di
   tornare qui. Sulle altre pagine la testata resta la fascia piena.

   Il fondo della testata lo scrive Elementor per quel contenitore preciso, con
   un peso che una regola di classe non raggiunge: da qui i quattro nomi in
   fila, che servono a pesare di piu'. */
.home .elementor-location-header,
body:has(.victrix-testata-linea) .elementor-location-header,
body:has(.victrix-testata) .elementor-location-header,
body:has(.victrix-sotto-testata) .elementor-location-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 50;
}
.home .elementor-location-header .e-con.e-parent,
body:has(.victrix-testata-linea) .elementor-location-header .e-con.e-parent,
body:has(.victrix-testata) .elementor-location-header .e-con.e-parent,
body:has(.victrix-sotto-testata) .elementor-location-header .e-con.e-parent {
    background-color: transparent;
}

/* Sotto alla testata che galleggia ci puo' essere qualunque fotografia, e
   alcune schede di carabina hanno lo scatto su fondo chiaro: li' il marchio
   bianco e le icone sparivano. Un velo che si spegne prima di finire la
   testata — sulle foto scure, che sono la maggioranza, non si vede nemmeno.

   E' lo sfondo della testata stessa e non un riquadro davanti: un riquadro
   andrebbe messo dietro al menu, e li' dentro "dietro" vuol dire dietro anche
   alla fotografia. */
.home .elementor-location-header,
body:has(.victrix-testata-linea) .elementor-location-header,
body:has(.victrix-testata) .elementor-location-header,
body:has(.victrix-sotto-testata) .elementor-location-header {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}

/* Quando la testata galleggia si appoggia al bordo alto della finestra, che
   pero' per chi e' collegato non e' libero: la barra di WordPress ci sta
   sopra, fissa, e il logo le finiva sotto. Si scende dell'altezza della barra
   — che WordPress stesso cambia a 46 pixel sotto i 783 — e solo quando la
   barra c'e' davvero, cioe' mai per chi visita il sito. */
.admin-bar.home .elementor-location-header,
body.admin-bar:has(.victrix-testata-linea) .elementor-location-header,
body.admin-bar:has(.victrix-testata) .elementor-location-header,
body.admin-bar:has(.victrix-sotto-testata) .elementor-location-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar.home .elementor-location-header,
    body.admin-bar:has(.victrix-testata-linea) .elementor-location-header,
    body.admin-bar:has(.victrix-testata) .elementor-location-header,
    body.admin-bar:has(.victrix-sotto-testata) .elementor-location-header {
        top: 46px;
    }
}

/* Il simbolo al centro della testata stretta e' un disegno in linea, e sotto
   la linea di base ci resta il vuoto che spetta alle lettere: sette pixel che
   fanno la testata piu' alta di quanto il Figma la voglia. Il segno diventa un
   blocco e il vuoto sparisce. */
/* ── Il pulsante del menu ──
   Il widget icona-testo fa due collegamenti separati, uno sul segno e uno
   sulla parola: fra i due restava una fessura di dodici pixel che non apriva
   niente, e in un pulsante piccolo si sbaglia. Il primo collegamento si
   allarga a coprire tutto. */
.victrix-apri-menu .elementor-icon-box-wrapper {
    position: relative;
}
.victrix-apri-menu .elementor-icon-box-icon a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── La pagina Vision ──
   Nel Figma il corpo della pagina sta tutto a destra di una riga verticale che
   parte da dentro la foto di testata e scende fino in fondo (Line 60: x=115,
   alta 2612). Non e' il bordo di un contenitore — nessun blocco comincia li' —
   quindi la disegna il tema, a cinquantaquattro punti dal margine, che e'
   la distanza che ha nel Figma. Su schermo stretto la riga si avvicina al
   bordo: undici punti invece di cinquantaquattro. */
.victrix-vision > .e-con-inner,
.victrix-vision {
    position: relative;
}
.victrix-vision > .e-con-inner::before,
.victrix-vision:not(:has(> .e-con-inner))::before {
    content: "";
    position: absolute;
    top: -48px;
    bottom: 0;
    left: 54px;
    width: 1px;
    /* Come nel Figma: un filo bianco che parte pieno sotto la testata e si
       spegne del tutto in fondo alla pagina. Mezzo pixel di spessore: sugli
       schermi ad alta densita' resta un filo netto, sugli altri una linea
       appena accennata. */
    background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18) 45%, rgba(255, 255, 255, 0));
    transform: scaleX(.5);
    transform-origin: left;
}

@media (max-width: 767px) {
    .victrix-vision > .e-con-inner::before,
    .victrix-vision:not(:has(> .e-con-inner))::before {
        left: 11px;
        top: -32px;
    }
}

/* Le foto della Vision hanno gli angoli tondi come nel Figma, e su schermo
   stretto escono dal margine da una parte e dall'altra: e' cosi' che il frame
   mobile le mostra, larghe piu' della pagina.

   Quanto devono uscire a sinistra dipende da dove si trovano: una foto dentro
   al blocco rientrato parte gia' trentaquattro punti piu' a destra, e per
   arrivare al bordo della finestra deve recuperarli. */
.victrix-vision {
    --victrix-vision-fuga: var(--victrix-margine);
}

.victrix-vision-rientro {
    --victrix-vision-fuga: calc(var(--victrix-margine) + 34px);
}

/* Le stesse regole valgono per il video del widget "Immagine o video". */
.victrix-vision-foto img,
.victrix-vision-foto video {
    display: block;
    border-radius: 6px;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .victrix-vision-foto img,
    .victrix-vision-foto video {
        width: calc(100% + var(--victrix-vision-fuga) + var(--victrix-margine));
        max-width: none;
        margin-left: calc(var(--victrix-vision-fuga) * -1);
        border-radius: 0;
    }
}

/* Elementor azzera la larghezza minima dei widget messi in riga, perche' una
   parola lunga non allarghi la riga. Qui pero' la parola e' un titolo: la sua
   scatola si stringeva sotto alla parola stessa, e le lettere finivano sopra
   al corsivo che le sta accanto. Solo da tablet in su: sul telefono il
   corsivo va sotto, e "CREATORS OF PRECISION" su una riga sola usciva
   dallo schermo di duecento punti. */
@media (min-width: 768px) {
    .e-con > .victrix-vision-titolo,
    .e-con-inner > .victrix-vision-titolo {
        min-width: max-content;
    }
}

/* Il filo accanto a "PRECISION" nel Figma non si ferma al margine: esce dalla
   pagina. Qui arriva fino al bordo della finestra. */
.victrix-vision-filo-lungo {
    margin-right: calc(var(--victrix-margine) * -1);
}

/* L'invito a iscriversi, in fondo al pie', occupa due righe: il carattere
   globale dell'occhiello non porta interlinea e le due righe si toccavano. */
.victrix-invito .elementor-heading-title {
    line-height: 1.6;
}

.victrix-simbolo .elementor-icon-wrapper {
    line-height: 0;
}
.victrix-simbolo svg {
    display: block;
}

/* ── Il bordo vivo ──
   Lo stesso bordo che gira intorno ai popup, qui addosso alle schede. La
   differenza e' il movimento: sul menu gira sempre, perche' e' un pannello
   solo e aperto per pochi secondi; in una pagina con otto schede otto bordi
   che girano insieme sarebbero una giostra. Quindi la fascia chiara sta ferma
   dov'e', e si muove solo su quella che si sta guardando.

   La classe va sull'involucro del widget (Avanzate -> Classi CSS), dove stanno
   anche il bordo pieno e il raggio: cosi' "border-radius: inherit" prende il
   raggio giusto senza che nessuno lo debba riscrivere qui. */
.victrix-bordo {
    position: relative;
}
.victrix-bordo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--victrix-giro, 200deg),
        rgba(255, 255, 255, .03) 0deg,
        rgba(255, 255, 255, .08) 60deg,
        rgba(255, 255, 255, .38) 150deg,
        rgba(255, 255, 255, .12) 240deg,
        rgba(255, 255, 255, .03) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
/* Dodici secondi: piu' svelto dei ventiquattro del menu, perche' qui il giro
   dura quanto dura il passaggio del mouse. */
.victrix-bordo:hover::after {
    animation: victrix-giro 12s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .victrix-bordo:hover::after {
        animation: none;
    }
}

/* Il contenuto della scheda deve stare dentro al raggio: senza, l'immagine di
   sfondo esce dagli angoli tondi e si vedono quattro spigoli. */
.victrix-bordo .elementor-cta {
    border-radius: inherit;
    overflow: hidden;
}

/* ── L'eroe: il carosello di apertura ──
   I pallini del Figma non sono pallini: sono trattini corti, chiari quello
   della diapositiva in vista e appena accennati gli altri. */
.victrix-eroe .swiper-pagination-bullet {
    width: 24px;
    height: 2px;
    border-radius: 0;
    background: rgba(255, 255, 255, .35);
    opacity: 1;
    transition: background .3s ease;
}
.victrix-eroe .swiper-pagination-bullet-active {
    background: var(--victrix-text);
}
.victrix-eroe .swiper-pagination {
    bottom: 28px;
}

/* ── Il filo sotto le etichette ──
   Nel Figma ogni richiamo — LINK sotto lo stemma, l'etichetta in fondo alle
   schede — ha un filo sottile sotto la parola. Non e' un bordo del bottone:
   e' largo quanto il testo e sta staccato. Il bottone lo disegna con il suo
   bordo inferiore, e quello si imposta dal pannello; qui c'e' solo cio' che il
   pannello non sa dire: il filo che si accende passandoci sopra. */
/* Il ".elementor-button" in coda non e' di troppo: il foglio del widget
   Invito all'azione disegna una cornice di due pixel intorno al richiamo, e
   nomina tutte e due le classi. A parita' di peso vince chi arriva dopo, e
   quale dei due fogli arrivi dopo cambia da pagina a pagina — sulla home
   vinceva il tema, sugli archivi il widget. Nominandole entrambe la questione
   e' chiusa. */
/* Il filo pero' non e' pieno (revisione di Marika, ottobre): nel Figma e' un
   tratto che nasce dal nulla, e' pieno fra il 20 e l'80 per cento e si spegne
   di nuovo — lo stesso disegno di tutte le linee della bozza. Un bordo non sa
   sfumare e tenere insieme due colori (fermo e al passaggio del mouse), quindi
   il filo diventa uno sfondo alto un pixel appoggiato in fondo al richiamo; il
   bordo del pannello si spegne. */
.victrix-filo .elementor-cta__button.elementor-button,
.victrix-filo .elementor-button {
    --victrix-filo-tinta: var(--victrix-muted);
    border: 0;
    border-radius: 0;
    background: var(--victrix-filo-figma) bottom center / 100% 1px no-repeat;
}
/* Il bordo impostato dal pannello del singolo pulsante (".elementor-159
   .elementor-element.elementor-element-xxx .elementor-button") pesa piu' della
   regola qui sopra e ridisegnava il vecchio filo pieno sotto quello sfumato,
   per esempio nello slider della home. Questa lo supera di un elemento. */
body .elementor .victrix-filo.elementor-element .elementor-button {
    border-width: 0;
}
.victrix-filo .elementor-cta__button,
.victrix-filo .elementor-button {
    transition: color .3s ease;
}
.victrix-filo:hover .elementor-cta__button,
.victrix-filo .elementor-button:hover {
    --victrix-filo-tinta: var(--victrix-text);
    color: var(--victrix-text);
}

/* ── La linea in fondo alle schede della gamma ──
   Nel Figma ogni scheda di "Our range" ha, sul bordo di sotto, un filo chiaro
   lungo meta' scheda e centrato, sfumato alle due estremita'. Il dopo della
   scheda e' gia' del bordo vivo: questo sta sul prima. */
.victrix-scheda-linea {
    --victrix-filo-tinta: rgba(255, 255, 255, .75);
}
/* Il video della scheda modello (inc/video-scheda.php): copre la foto come
   la copre lo sfondo, sotto al velo, e compare in dissolvenza solo quando sta
   davvero andando. */
.victrix-video-scheda {
    position: absolute;
    inset: 0;
    /* Lo stesso piano della foto (Elementor le da' z-index 1) e il velo resta
       a 2: venendo dopo, il video le sta sopra. Senza, Firefox lo metteva
       dietro la foto — si vedeva solo un attimo, prima che arrivasse lei. */
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.victrix-video-scheda.is-in-corso {
    opacity: 1;
}

/* Il video di sfondo degli Inviti all'azione (inc/video-cta.php): sta dentro
   lo sfondo, quindi prende filtri e zoom della foto e resta sotto al velo.
   Il lettore YouTube/Vimeo e' 16:9: lo si allarga finche' copre il box,
   come fa object-fit: cover col file. */
.victrix-video-cta {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}
.victrix-video-cta.is-in-corso {
    opacity: 1;
}
.victrix-video-cta video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.victrix-video-cta iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    border: 0;
    transform: translate(-50%, -50%);
}

.victrix-scheda-linea::before {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 0;
    z-index: 3;
    height: 1px;
    background: var(--victrix-filo-figma);
    pointer-events: none;
}

/* ── Le schede della gamma ──
   La foto riempie la scheda, centrata, con un velo davanti: e' il modo in cui
   sono fatte le schede di Rome, e il committente le vuole cosi'. Riempire e'
   anche l'unico modo che regge foto di proporzioni diverse fra loro.

   Prima la foto ci stava dentro intera ("contain"), per assomigliare al Figma
   dove la carabina e' una fascia in mezzo al nero. Con le foto che abbiamo —
   ritagli su fondo chiaro — quella fascia diventava una targa grigia in mezzo
   alla scheda.

   L'occhiello sta sopra al nome, mentre il widget stampa prima il titolo e poi
   la descrizione: invece di invertire i ruoli — il nome nel campo sbagliato,
   che poi si porta dietro il titolo della scheda e il peso per chi cerca — si
   inverte solo l'ordine con cui si vedono. */
.victrix-scheda-linea .elementor-cta__description {
    order: -1;
}
/* Occhiello e nome stanno insieme in alto, il richiamo va in fondo.

   Il contenuto della scheda, come lo fa Elementor, e' una riga che va a capo e
   non una colonna: li' dentro justify-content non sposta niente in verticale e
   align-content distribuirebbe anche il nome, staccandolo dall'occhiello. Si
   raddrizza in colonna — e allora il margine automatico sull'ultimo basta a
   mandarlo in fondo.

   Vale per tutte le schede del sito che hanno questa forma, non solo per
   quelle della gamma: la classe e' "victrix-carta". */
.victrix-carta .elementor-cta__content {
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.victrix-carta .elementor-cta__button-wrapper {
    margin-top: auto;
}

/* Le due schede che portano alle sottolinee, nella pagina Professional:
   proporzioni del Figma e foto a riempire, che li' sono scatti d'ambiente e
   non ritagli di prodotto. */
.victrix-scheda-sottolinea-grande .elementor-cta {
    aspect-ratio: 504 / 595;
}
@media (max-width: 767px) {
    .victrix-scheda-sottolinea-grande .elementor-cta {
        aspect-ratio: 4 / 5;
    }
}
/* Le proporzioni della scheda sono quelle del Figma (504 per 625): scritte
   come rapporto invece che come altezza fissa, restano giuste a ogni
   larghezza di finestra. */
.victrix-scheda-linea .elementor-cta {
    aspect-ratio: 504 / 625;
}
@media (max-width: 767px) {
    .victrix-scheda-linea .elementor-cta {
        aspect-ratio: 4 / 5;
    }
}

/* Le altre due schede della home tengono anch'esse le proporzioni del Figma:
   la vetrina del modello e' una fascia larga (1152 per 391), le tre schede di
   "Inside Victrix" sono quasi due quadrati affiancati (380 per 236). Su
   telefono la fascia diventerebbe una striscia alta due dita: li' si allarga. */
.victrix-vetrina .elementor-cta {
    aspect-ratio: 1152 / 391;
}
.victrix-scheda-inside .elementor-cta {
    aspect-ratio: 380 / 236;
}
/* Accessori e lifestyle: due schede a meta' larghezza, alte come le tre di
   Inside Victrix (Marika, 30/10). Un terzo di larghezza a 380:236 e' come
   meta' larghezza a circa 2,44:1. */
.victrix-scheda-inside.victrix-scheda-larga .elementor-cta {
    aspect-ratio: 2.44 / 1;
}
@media (max-width: 767px) {
    .victrix-vetrina .elementor-cta {
        aspect-ratio: 3 / 2;
    }
    .victrix-scheda-inside.victrix-scheda-larga .elementor-cta {
        aspect-ratio: 16 / 9;
    }
    .victrix-scheda-inside .elementor-cta {
        aspect-ratio: 16 / 9;
    }
}

/* Quelle proporzioni pero' litigano con l'altezza minima del contenuto, che
   Elementor scrive uguale per tutte le misure di schermo: su telefono la
   scheda diventa piu' bassa del suo stesso contenuto, e la scritta in fondo —
   "LA NOSTRA VISIONE", "NEWS", "DEALER LOCATOR" — finiva tagliata via, con le
   schede ridotte a fotografie mute. Il contenuto si adatta alla scheda.

   L'!important serve davvero: l'altezza minima Elementor la scrive per quel
   singolo widget, con un selettore che una regola di classe non raggiunge. */
.victrix-scheda-inside .elementor-cta__content,
.victrix-vetrina .elementor-cta__content {
    min-height: 100% !important;
}

/* La scheda Academy della home, come nella proposta di Marika (30/10): in
   alto l'occhiello e "Academy", in fondo la frase e il link; in mezzo il
   video. L'occhiello e' uno <span> dentro il titolo, perche' la scheda di
   Elementor ha un solo titolo. */
.victrix-academy-box .elementor-cta__content {
    justify-content: space-between;
    padding-block: clamp(28px, 3vw, 44px);
}
.victrix-academy-box .elementor-cta__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 0 !important;
}
.victrix-academy-box .victrix-occhiello {
    font-family: "Oxygen", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: #D0D0D0;
    -webkit-text-stroke: 0;
}
.victrix-academy-box .elementor-cta__description {
    max-width: 40ch;
    margin-top: auto;
    margin-inline: auto;
}
/* Il link sta subito sotto la frase: Elementor gli da' anche lui
   margin-top: auto, che dividerebbe il vuoto a meta'. */
.victrix-academy-box .elementor-cta__button-wrapper {
    margin-top: 0;
}
@media (max-width: 767px) {
    .victrix-academy-box .victrix-occhiello {
        font-size: 9px;
        letter-spacing: .24em;
    }
    .victrix-academy-box .elementor-cta__description {
        font-size: 12px !important;
    }
}

/* ── Il "+" che apre una foto a schermo intero ──
   Sta in alto a destra dell'immagine e non ha un colore fisso: e' nero sulle
   foto chiare e bianco su quelle scure. Non lo decide nessuno script —
   "difference" fa sottrarre al browser il bianco del segno da quello che ha
   sotto, e la sottrazione da sola da' sempre il contrario del fondo. Il
   disegno sono due filetti da un pixel, quindi niente carattere icona.

   Lo usano sia la scheda di un accessorio sia la galleria di una carabina:
   e' lo stesso segno, e vale la pena scriverlo una volta. */
.victrix-piu {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    mix-blend-mode: difference;
    opacity: .9;
    cursor: pointer;
    z-index: 2;
}
.victrix-piu::before,
.victrix-piu::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #FFFFFF;
    transform: translate(-50%, -50%);
}
.victrix-piu::before {
    width: 100%;
    height: 1px;
}
.victrix-piu::after {
    width: 1px;
    height: 100%;
}
.victrix-piu:hover {
    opacity: 1;
}
/* Il kit di Elementor veste ogni <button>: al "+" della foto grande andrebbe
   a mettere cornice e fondo chiaro al passaggio del mouse. */
button.victrix-piu:hover,
button.victrix-piu:focus,
button.victrix-piu:active {
    border: 0;
    background: none;
    box-shadow: none;
}
.victrix-piu:focus-visible {
    outline: 1px solid #FFFFFF;
    outline-offset: 2px;
}

/* ── La scheda di un accessorio ──
   Due caroselli legati: la foto grande e, di fianco, la colonna delle piccole.
   Si scorre una e l'altra segue; il legame lo fa Swiper, qui c'e' solo il
   vestito.

   Il nome e' "fotoscheda" e non "galleria" perche' una .victrix-galleria
   c'era gia', ed e' quella delle carabine: due blocchi con lo stesso nome si
   erano messi a scambiarsi le regole. */
.victrix-fotoscheda {
    display: flex;
    gap: 12px;
    /* "stretch" e non "flex-start": la colonna delle piccole deve venire alta
       quanto la foto grande, o Swiper — che in verticale ha bisogno di
       un'altezza vera — non saprebbe quante piccole ci stanno. */
    align-items: stretch;
}
.victrix-fotoscheda__grande {
    position: relative;
    flex: 1;
    margin: 0;
    min-width: 0;
}
.victrix-fotoscheda__corsia {
    width: 100%;
}
.victrix-fotoscheda__corsia .swiper-slide > a,
.victrix-fotoscheda__mini {
    position: relative;
    display: block;
}
.victrix-fotoscheda__foto,
.victrix-fotoscheda__mini img {
    display: block;
    width: 100%;
    aspect-ratio: var(--victrix-fotoscheda-proporzione, 1 / 1);
    object-fit: cover;
    border-radius: 4px;
    background: #0e0e0e;
}
.victrix-fotoscheda__lato {
    width: 22%;
    flex: 0 0 22%;
}
/* Swiper da' a ogni diapositiva tutta l'altezza della corsia: con "auto" ce
   ne starebbe una sola, alta quanto la colonna. Qui l'altezza la deve dare la
   foto, che e' quadrata. */
.victrix-fotoscheda__lato .swiper-slide {
    height: auto;
}
/* Lo spazio fra una miniatura e l'altra Swiper lo mette dopo ognuna, ultima
   compresa: in fondo alla colonna restava un dito di vuoto, e con la foto
   grande ferma li' accanto si vedeva benissimo. Swiper lo scrive in linea,
   quindi per toglierlo bisogna passargli davanti. */
.victrix-fotoscheda__lato .swiper-slide:last-child {
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}
.victrix-fotoscheda--sotto {
    flex-direction: column;
}
.victrix-fotoscheda--sotto .victrix-fotoscheda__lato {
    width: 100%;
    flex: 0 0 auto;
}
/* La piccola non accesa e' un po' spenta: dice quale si sta guardando senza
   bisogno di una cornice. La classe la mette Swiper. */
.victrix-fotoscheda__mini {
    opacity: .55;
    cursor: pointer;
    transition: opacity .2s ease;
}
.victrix-fotoscheda__mini:hover,
.victrix-fotoscheda__mini.swiper-slide-thumb-active {
    opacity: 1;
}
/* Chi naviga da tastiera deve vedere dov'e': un filo attorno, non un
   rettangolo bianco. */
.victrix-fotoscheda__mini:focus-visible {
    outline: 1px solid var(--e-global-color-vxmuted, #a0a0a0);
    outline-offset: 3px;
}

/* ── Le frecce del carosello ──
   Si vedono solo quando il mouse e' sulla foto, come chiesto: su un telefono
   non servono, li' si scorre col dito. Chi arriva da tastiera le vede lo
   stesso, o non saprebbe che ci sono.

   Il chevron e' disegnato con due filetti: quello chiesto e' il Light di Font
   Awesome, che sta nella versione a pagamento e in questo sito non c'e' —
   nella Free i chevron esistono solo in Solid, molto piu' pesante. */
.victrix-fotoscheda .victrix-freccia,
.victrix-fotoscheda .victrix-freccia:hover,
.victrix-fotoscheda .victrix-freccia:focus,
.victrix-fotoscheda .victrix-freccia:active {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s ease;
    /* La sottrazione sta qui e non sul segno disegnato dentro: l'opacita' fa
       del bottone un gruppo a se', e un figlio che si sottrae dentro a un
       gruppo si sottrae dal niente — restava un chevron bianco, invisibile
       sulle foto chiare, che sono quasi tutte. */
    mix-blend-mode: difference;
}
.victrix-fotoscheda .victrix-freccia--prima { left: 6px; }
.victrix-fotoscheda .victrix-freccia--dopo  { right: 6px; }
.victrix-fotoscheda__grande:hover .victrix-freccia,
.victrix-fotoscheda .victrix-freccia:focus-visible {
    opacity: .85;
}
.victrix-fotoscheda__grande:hover .victrix-freccia:hover {
    opacity: 1;
}
/* Arrivati in fondo la freccia si spegne: la classe la mette Swiper. */
.victrix-fotoscheda__grande:hover .victrix-freccia.swiper-button-disabled {
    opacity: .2;
    cursor: default;
}
/* Il segno: due filetti a squadra, girati di 45 gradi. Come il "+", si
   sottrae da quello che ha sotto, cosi' resta leggibile sia su una foto
   chiara sia su una scura. */
.victrix-freccia::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
}
.victrix-freccia--prima::before {
    transform: translate(-30%, -50%) rotate(-45deg);
}
.victrix-freccia--dopo::before {
    transform: translate(-70%, -50%) rotate(135deg);
}
.victrix-fotoscheda .victrix-freccia:focus-visible {
    outline: 1px solid #FFFFFF;
    outline-offset: 2px;
}

/* Il "+" della foto grande e' un <button> solo nella galleria delle carabine;
   qui sta dentro al collegamento ed e' uno <span>. Il kit di Elementor pero'
   veste ogni elemento cliccabile, e sul "+" della foto grande arrivava a
   mettere cornice, angoli tondi e imbottitura: da lontano era una pasticca
   bianca, non un segno. Il nome doppio serve a battere la regola del kit. */
.victrix-fotoscheda .victrix-piu,
.victrix-fotoscheda .victrix-piu:hover,
.victrix-fotoscheda .victrix-piu:focus,
.victrix-fotoscheda .victrix-piu:active {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* ── Le foto che restano ferme mentre scorre il testo (solo da tablet in su) ──
   Due appigli, uno dentro l'altro, e si danno il cambio.

   Il primo e' la foto grande, appesa in alto dentro alla galleria. Quando le
   miniature sono tante, la loro colonna e' piu' lunga della foto: la foto
   resta ferma e le piccole le scorrono accanto, finche' la foto non arriva in
   fondo alla colonna.

   Il secondo e' la galleria intera, appesa dentro alla colonna, che il tema
   ha tirato alta quanto la riga. Il suo aggancio pero' non e' lo stesso: sta
   piu' in alto del bordo della finestra, di quanto la colonna delle piccole
   sporge oltre la foto. Cosi' scatta nell'istante esatto in cui la foto ha
   finito la sua corsa, e da li' in poi foto e miniature stanno ferme insieme
   mentre il testo continua a scorrere.

   Quel numero non si puo' scrivere qui, perche' dipende da quante miniature ha
   l'articolo: lo misura assets/js/galleria-accessorio.js.

   Quando le miniature stanno tutte di fianco alla foto la sporgenza e' zero,
   i due agganci coincidono e la galleria si ferma subito — che e' quello che
   serve sulla maggior parte delle schede. */
body {
    --victrix-appiglio: 24px;
}
body.admin-bar {
    --victrix-appiglio: 56px;
}
@media (min-width: 768px) {
    .victrix-colonna-foto {
        align-self: stretch;
    }
    .victrix-colonna-foto .elementor-widget-victrix_galleria_accessorio {
        position: sticky;
        top: var(--victrix-fotoscheda-appiglio, var(--victrix-appiglio));
    }
    /* "flex-start" e non stirata: cosi' la scatola della foto grande e' alta
       quanto la foto, e le frecce — che si mettono a meta' della scatola —
       cadono a meta' della foto invece che a meta' della colonna delle
       miniature, che e' piu' lunga. */
    .victrix-fotoscheda__grande {
        align-self: flex-start;
        position: sticky;
        top: var(--victrix-appiglio);
    }
}

@media (max-width: 767px) {
    .victrix-fotoscheda {
        flex-direction: column;
    }
    .victrix-fotoscheda__lato {
        width: 100%;
        flex: 0 0 auto;
    }
    /* In riga le piccole hanno bisogno di una larghezza loro: in verticale
       Swiper le misura in altezza, in orizzontale in larghezza. */
    .victrix-fotoscheda__lato .swiper-slide {
        width: 22%;
    }
}

/* ── Le schede degli accessori ──
   I nomi degli articoli sono lunghi ("FRENO DI BOCCA PER VICTRIX VENUS V CAL
   .260/6.5/6 - M18X1") e senza un freno si mangiavano la scheda, finendo sopra
   al codice e al richiamo. Tre righe e basta, e la scheda si prende tutta
   l'altezza della sua riga, cosi' quattro schede affiancate sono alte uguali. */
.victrix-scheda-accessorio,
.victrix-scheda-accessorio .elementor-cta {
    height: 100%;
}
.victrix-scheda-accessorio .elementor-cta__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Il "mostra altri" in fondo agli elenchi nasce col vestito di Elementor:
   fondo bianco e testo bianco, cioe' una piastrella vuota. Qui prende quello
   degli altri pulsanti del sito — trasparente, bordo sottile, tondo. */
.e-loop__load-more .elementor-button {
    background-color: transparent;
    border: 1px solid var(--e-global-color-vxmuted, #a0a0a0);
    border-radius: 999px;
    color: var(--e-global-color-text, #fff);
    padding: 12px 28px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background-color .2s ease;
}
.e-loop__load-more .elementor-button:hover {
    background-color: rgba(255, 255, 255, .08);
    color: var(--e-global-color-text, #fff);
}

/* Un pulsante senza indirizzo non e' un pulsante: e' il caso della scheda
   tecnica e del manuale, che esistono solo per una parte degli articoli.
   Elementor li stampa comunque, solo senza href; qui spariscono. */
.victrix-documento:has( .elementor-button:not( [href] ) ) {
    display: none;
}

/* ── I filtri dell'archivio accessori ──
   Nel Figma sono una riga di parole separate da una barra, con quella scelta
   sottolineata; su telefono diventano un elenco a tendina, perche' in riga non
   ci starebbero. */
.victrix-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.victrix-filtri__voce {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--e-global-color-vxmuted, #a0a0a0);
    text-decoration: none;
    padding-bottom: 2px;
}
.victrix-filtri__voce:hover {
    color: var(--e-global-color-text, #fff);
}
.victrix-filtri__voce.e-attiva {
    color: var(--e-global-color-text, #fff);
    border-bottom: 1px solid currentColor;
}
.victrix-filtri__barra {
    color: var(--e-global-color-vxmuted, #a0a0a0);
    opacity: .5;
}
.victrix-filtri__scelta {
    display: none;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--e-global-color-vxborder, #2a2a2a);
    border-radius: 999px;
    background: transparent;
    color: var(--e-global-color-text, #fff);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .victrix-filtri__voce,
    .victrix-filtri__barra {
        display: none;
    }
    .victrix-filtri__scelta {
        display: block;
    }
}

/* Un titolo che non si vede ma si legge.
   Sulla home il nome del modello e' un disegno, non testo, e la pagina
   resterebbe senza intestazione di primo livello: qui c'e' il titolo, tolto
   dalla vista ma non dal documento. Non si usa display:none ne' visibility,
   che lo toglierebbero anche ai lettori di schermo. */
.victrix-solo-lettori {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Il nome disegnato al posto del nome scritto ──
   Dove la carabina ha un logo calligrafico, il tag dinamico del tema lo mette
   dentro al titolo al posto del testo. La misura e' in em, cioe' legata al
   corpo del titolo: cosi' segue da sola le misure che la card ha gia' per lo
   schermo grande e per il telefono, senza doverle ripetere qui.
   L'altezza resta "auto" — Elementor la impone a tutte le immagini — e a
   contenere il disegno ci pensa max-height. */
.victrix-nome-logo {
    display: inline-block;
    width: auto;
    max-width: 100%;
    max-height: 2.6em;
    object-fit: contain;
}
/* Nelle schede delle sottolinee no: li' i nomi devono stare tutti alla stessa
   altezza, come in una tabella, e un logo piu' alto della riga di testo
   abbassava la foto e il richiamo di quella scheda soltanto. Sta dentro alla
   riga — l'immagine ha il suo margine bianco attorno, quindi le lettere
   vengono comunque grandi come le maiuscole accanto. */
.victrix-nome-sottolinea .victrix-nome-logo {
    max-height: 1.2em;
    vertical-align: middle;
}

/* ── Le schede delle sottolinee ──
   Nel Figma le schede stanno in fila come su una tabella: il nome sempre alla
   stessa altezza, la foto in una finestra della stessa misura, il richiamo in
   fondo allineato. Le foto delle carabine pero' hanno proporzioni diverse fra
   loro — c'e' chi e' 2000x650 e chi quasi quadrata — e lasciate libere
   sfalsano tutte le righe. Si da' quindi alla finestra un'altezza fissa e si
   lascia che la foto ci stia dentro intera. */
.victrix-scheda-sottolinea .victrix-foto-scheda img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    /* Le foto di prodotto sono ritagliate sul bianco: sul nero diventano una
       targa chiara, e una targa con gli angoli tondi sembra voluta. */
    border-radius: 6px;
}
@media (max-width: 767px) {
    .victrix-scheda-sottolinea .victrix-foto-scheda img {
        height: 150px;
    }
}
/* La foto sta staccata dal filo sopra e dal richiamo sotto. */
.victrix-scheda-sottolinea .victrix-foto-scheda {
    margin: 22px 0;
}

/* ── Il filo sfumato ──
   Nel Figma le righe sotto agli occhielli e sotto ai nomi non sono righe
   piene: partono chiare e si spengono. E' un segno che il sito online ha gia',
   dove pero' e' un'immagine — specs-line.webp, 600 per 5 pixel — appiccicata
   come sfondo. Misurata: grigio #ececec pieno per il primo 42%, poi l'opacita'
   scende a zero con una curva morbida. Qui e' la stessa curva scritta in
   gradiente, che non e' un file da scaricare, si adatta a qualunque larghezza
   e cambia colore con il resto del sito.

   Si usa "border-image" e non un riquadro sovrapposto: una riga sola, niente
   pseudo-elementi da non pestare — le schede ne usano gia' uno per il bordo
   vivo — e il bordo resta un bordo, quindi occupa il suo spazio come prima.

   Due versioni: sotto a un testo allineato a sinistra il filo parte pieno e si
   spegne verso destra; sotto a un titolo centrato si spegne da tutte e due le
   parti, com'e' sotto a "SPORTING" nella fascia di linea. */
body {
    --victrix-filo-sfumato: linear-gradient(
        90deg,
        rgba(236, 236, 236, 1) 0%,
        rgba(236, 236, 236, 1) 42%,
        rgba(236, 236, 236, .98) 49%,
        rgba(236, 236, 236, .95) 56%,
        rgba(236, 236, 236, .86) 63%,
        rgba(236, 236, 236, .69) 70%,
        rgba(236, 236, 236, .45) 77%,
        rgba(236, 236, 236, .19) 84%,
        rgba(236, 236, 236, .03) 91%,
        rgba(236, 236, 236, 0) 98%
    );
    --victrix-filo-sfumato-centro: linear-gradient(
        90deg,
        rgba(236, 236, 236, 0) 0%,
        rgba(236, 236, 236, .10) 12%,
        rgba(236, 236, 236, .78) 32%,
        rgba(236, 236, 236, .82) 50%,
        rgba(236, 236, 236, .78) 68%,
        rgba(236, 236, 236, .10) 88%,
        rgba(236, 236, 236, 0) 100%
    );
}

/* Il filo delle linee del Figma (sotto ai richiami, in fondo alle schede,
   sul bordo del menu): trasparente, pieno dal 20 all'80 per cento,
   trasparente. La tinta la sceglie chi lo usa, con --victrix-filo-tinta.

   Il gradiente si dichiara su ogni elemento e non una volta sola sul body:
   una variabile che ne usa un'altra si risolve dove e' scritta, e i figli
   ereditano il risultato gia' fatto — cambiare la tinta sotto non servirebbe
   a niente. */
.victrix-filo .elementor-button,
.victrix-scheda-linea::before {
    --victrix-filo-figma: linear-gradient(
        90deg,
        transparent 0%,
        var(--victrix-filo-tinta, #fff) 20%,
        var(--victrix-filo-tinta, #fff) 80%,
        transparent 100%
    );
}

.victrix-sfumato {
    border-style: solid;
    border-width: 0 0 1px;
    border-image: var(--victrix-filo-sfumato) 1;
}

/* Su un contenitore "a larghezza contenuto" il bordo starebbe comunque sulla
   scatola esterna, che larga lo e' quanto la finestra: il filo scappava fuori
   dai margini e correva da un bordo all'altro dello schermo. Va sulla scatola
   interna, quella che tiene il contenuto, cosi' comincia e finisce dove
   comincia e finisce il testo che gli sta sopra. */
.e-con-boxed.victrix-sfumato {
    border-width: 0;
}
.e-con-boxed.victrix-sfumato > .e-con-inner {
    border-style: solid;
    border-width: 0 0 1px;
    border-image: var(--victrix-filo-sfumato) 1;
}

.victrix-sfumato-centro {
    border-style: solid;
    border-width: 0 0 1px;
    border-image: var(--victrix-filo-sfumato-centro) 1;
}

/* Sotto al nome della linea il filo e' largo quanto la parola, non quanto la
   pagina: il titolo diventa quindi un blocco in linea, che si prende la misura
   del testo e resta centrato da solo. */
.victrix-titolo-filo .elementor-heading-title {
    display: inline-block;
    padding-bottom: 12px;
    border-style: solid;
    border-width: 0 0 1px;
    border-image: var(--victrix-filo-sfumato-centro) 1;
}

/* ── Le notizie ──
   Le foto delle notizie arrivano da fonti diverse e hanno proporzioni diverse
   fra loro: quadrate, verticali, panoramiche. Nel Figma stanno tutte nella
   stessa finestra, e senza una regola l'elenco si sfalsa. */
.victrix-foto-news img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
}
.victrix-foto-news-piccola img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 4px;
}

/* L'attacco della notizia e' lungo quanto e' lungo: si taglia dopo qualche
   riga, con i puntini, o una notizia prolissa sfonda la scheda e manda fuori
   registro tutta la riga.

   Il taglio va sull'elemento del widget e non su un paragrafo dentro: con la
   marcatura ottimizzata attiva — e su questo sito lo e' — il testo esce nudo,
   senza <p> intorno, e una regola sul paragrafo non trova niente. */
.victrix-attacco,
.victrix-attacco p {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.victrix-righe-4,
.victrix-righe-4 p {
    -webkit-line-clamp: 4;
}
.victrix-righe-5,
.victrix-righe-5 p {
    -webkit-line-clamp: 5;
}

/* Nella pagina delle news il riquadro della newsletter e' scuro e il campo
   dentro e' l'unica cosa chiara: la freccia, che sta dentro al campo come nel
   pie' di pagina, li' dev'essere scura o sparisce nel bianco. */
.victrix-newsletter-chiara .elementor-field-type-submit button {
    color: var(--victrix-bg);
}
.victrix-newsletter-chiara .elementor-field-type-submit button:hover {
    color: var(--victrix-border);
}

/* ── La galleria per la stampa ──
   Titolo, due linguette, e sotto la griglia. Nel Figma le linguette stanno
   appoggiate su una riga che attraversa la pagina, con gli angoli di sopra
   arrotondati: quella aperta e' bianca piena, l'altra ha solo il contorno. */
.victrix-media-intestazione {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    margin: 0 0 26px;
    color: var(--victrix-text);
}
.victrix-media-linguette {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--victrix-border);
}
/* Le linguette sono <button>, e il kit di Elementor veste tutti i bottoni:
   angoli tondi da dieci punti su tutti e quattro gli spigoli, e al passaggio
   del mouse un raggio ancora piu' largo. Una linguetta pero' si appoggia al
   pannello: sotto e' squadrata, e l'angolo non cambia mai. Il nome ripetuto
   due volte, e tutti gli stati elencati, servono a pesare piu' del kit. */
.victrix-media .victrix-media-linguetta,
.victrix-media .victrix-media-linguetta:hover,
.victrix-media .victrix-media-linguetta:focus,
.victrix-media .victrix-media-linguetta:active {
    min-width: 132px;
    padding: 13px 22px;
    border: 1px solid var(--victrix-border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: none;
    color: var(--victrix-text);
    font-family: var(--victrix-carattere);
    font-size: 12px;
    letter-spacing: 1.4px;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.victrix-media .victrix-media-linguetta + .victrix-media-linguetta {
    margin-left: -1px;
}
.victrix-media .victrix-media-linguetta:hover {
    background: rgba(255, 255, 255, .07);
}
.victrix-media .victrix-media-linguetta.e-attivo,
.victrix-media .victrix-media-linguetta.e-attivo:hover {
    background: var(--victrix-text);
    color: var(--victrix-bg);
    border-color: var(--victrix-text);
}

/* Il pannello coperto resta nel documento ma fuori dal flusso: cosi' le
   immagini che ha dentro non si scaricano finche' non lo si apre. */
.victrix-media-pannello {
    display: none;
    padding-top: 32px;
}
.victrix-media-pannello.e-attivo {
    display: block;
}

.victrix-media-griglia {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1024px) {
    .victrix-media-griglia {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .victrix-media-griglia {
        grid-template-columns: repeat(2, 1fr);
    }
}

.victrix-media-voce {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    line-height: 0;
}
.victrix-media-voce.e-oltre {
    display: none;
}
.victrix-media-voce img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    transition: transform .6s ease;
}
.victrix-media-voce:hover img {
    transform: scale(1.06);
}

/* Sul fermo immagine di un video ci va il segno del play, o non si capisce che
   e' un video e non una foto. */
.victrix-media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
}
.victrix-media-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    width: 0;
    height: 0;
    margin: -8px 0 0 -5px;
    border-left: 14px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.victrix-media-titolo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
    color: var(--victrix-text);
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1.3;
}

.victrix-media-altre {
    display: block;
    margin: 40px auto 0;
    padding: 14px 28px;
    border: 1px solid var(--victrix-border);
    border-radius: var(--victrix-radius);
    background: none;
    color: var(--victrix-text);
    font-family: var(--victrix-carattere);
    font-size: 12px;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.victrix-media-altre:hover {
    background: var(--victrix-text);
    color: var(--victrix-bg);
}
.victrix-media-vuoto {
    color: var(--victrix-muted);
}


/* ── Le specifiche della carabina: la struttura della scheda del sito vecchio ──
   Le caratteristiche del modello — calibro, canna, peso, configurazione —
   possono venire da due posti: il contenuto della scheda, importato dal sito
   vecchio, o la paginetta HTML che pubblica il DAM del CRM (vedi inc/dam.php).
   Chi legge non deve accorgersi della differenza: tutte e due si vestono come
   la scheda tecnica del sito di oggi (FEEDBACK 03.6), con i caratteri del
   sito nuovo.

   - Due colonne. Il contenuto importato le ha gia' (due blocchi
     wp-block-column, prima stampati uno sotto l'altro); il DAM marca le sue
     sezioni "sx" e "dx" e il widget le raccoglie in .vx-spec-colonne.
   - Titoletti maiuscoli in grassetto, piu' grandi di prima, con una linea
     sotto che sfuma a destra.
   - Il testo invece resta come prima. */
.victrix-specifiche :has(> .wp-block-column),
.victrix-specifiche .vx-spec-colonne {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 6vw, 96px);
    align-items: start;
}
.victrix-specifiche .wp-block-column,
.victrix-specifiche .vx-spec-colonna {
    min-width: 0;
}
body .victrix-specifiche .wp-block-column h4,
body .victrix-specifiche .dam_section_title {
    position: relative;
    margin: 40px 0 14px;
    padding-bottom: 14px;
    font-family: var(--victrix-carattere);
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--victrix-text);
}
body .victrix-specifiche .wp-block-column h4:first-child,
body .victrix-specifiche .vx-spec-colonna > .dam_section:first-child .dam_section_title {
    margin-top: 0;
}
.victrix-specifiche .wp-block-column h4::after,
.victrix-specifiche .dam_section_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35) 60%, rgba(255, 255, 255, 0));
}
/* Il testo resta quello di sempre: quello del DAM vestito come il resto
   della pagina, quello importato com'era. */
.victrix-specifiche .dam_section_text {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 1.3px;
}
.victrix-specifiche a {
    color: inherit;
    text-decoration: underline;
}
/* Le avvertenze in coda — "salvo diversa indicazione scritta..." — sono da
   leggere, non da declamare: nel DAM sono marcate come minute, nel contenuto
   importato hanno la dimensione piccola dell'editor a blocchi. */
.victrix-specifiche .placeholder--mini,
.victrix-specifiche .wp-block-column p.has-small-font-size {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--victrix-muted);
}
/* La seconda pagina del PDF: nell'HTML resta un contenitore vuoto. */
.victrix-specifiche--dam .dam_page2:empty {
    display: none;
}
/* Il terzo formato importato (Gladio e altre schede vecchie): un paragrafo
   per voce, col titoletto in grassetto e un a capo — "<strong>Calibro</strong>
   <br>…". Non dice in che colonna va ogni voce: le colonne le fa il browser,
   senza spezzare una voce a meta'. */
.victrix-specifiche:has(> p > strong:first-child + br),
.victrix-specifiche :has(> p > strong:first-child + br) {
    column-count: 2;
    column-gap: clamp(32px, 6vw, 96px);
}
.victrix-specifiche:has(> p > strong:first-child + br) > p,
.victrix-specifiche :has(> p > strong:first-child + br) > p {
    break-inside: avoid;
    margin: 0 0 28px;
}
.victrix-specifiche p > strong:first-child:has(+ br) {
    position: relative;
    display: block;
    margin-bottom: 14px;
    padding-bottom: 14px;
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--victrix-text);
}
.victrix-specifiche p > strong:first-child:has(+ br)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35) 60%, rgba(255, 255, 255, 0));
}
.victrix-specifiche p > strong:first-child + br {
    display: none;
}
@media (max-width: 767px) {
    .victrix-specifiche :has(> .wp-block-column),
    .victrix-specifiche .vx-spec-colonne {
        grid-template-columns: minmax(0, 1fr);
    }
    .victrix-specifiche:has(> p > strong:first-child + br),
    .victrix-specifiche :has(> p > strong:first-child + br) {
        column-count: 1;
    }
    body .victrix-specifiche .vx-spec-colonna + .vx-spec-colonna > .dam_section:first-child .dam_section_title,
    body .victrix-specifiche .wp-block-column + .wp-block-column h4:first-child {
        margin-top: 40px;
    }
}


/* ── Domina ──
   La pagina del trofeo femminile, ricostruita dal sito attuale (vedi
   tools/design-domina.php). */

.victrix-domina-logo img {
    width: 100%;
    max-width: 420px;
    height: auto;
}

/* I loghi dei partner arrivano di due famiglie: Victrix e Armi e Tiro hanno
   l'inchiostro bianco, Fiocchi ed Explorer Cases scuro. Su un fondo solo
   meta' sparirebbe, e non esistono le versioni mancanti. Si stampano tutti
   bianchi: "brightness(0)" li annerisce del tutto, "invert(1)" li ribalta —
   il risultato e' la sagoma piena, in bianco, trasparenza compresa. */
.victrix-logo-partner img {
    max-height: 52px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .72;
    transition: opacity .25s ease;
}
.victrix-logo-partner a:hover img {
    opacity: 1;
}
/* Tranne quelli che bianchi lo sono gia': il logo Rome e' inchiostro chiaro su
   fondo scuro pieno, senza trasparenza, e ribaltarlo lo riduceva a una
   pasticca bianca. */
.victrix-logo-partner--intatto img {
    filter: none;
}
@media (max-width: 767px) {
    .victrix-logo-partner img {
        max-height: 40px;
    }
}

/* La galleria del 2021 sul telefono: due foto per riga, come la galleria della
   carabina e la raccolta di foto delle news. Elementor sotto i 480 punti ne
   mette una sola, e la sua regola pesa quattro classi: per passarle davanti
   qui ce ne vogliono cinque. Il selettore non nomina il numero di colonne,
   cosi' regge anche se un domani la galleria ne avra' quattro. */
@media (max-width: 479px) {
    .victrix-galleria-domina .elementor-image-gallery .gallery[class*="gallery-columns-"] .gallery-item {
        max-width: 50%;
    }
}

/* ── Ricerca del Dealer Finder (widget Cerca rivenditori) ── */
.victrix-cerca-rivenditori {
    position: relative;
    max-width: 480px;
    margin: 0;
}
.victrix-cerca-rivenditori .victrix-cerca-rivenditori-campo {
    width: 100%;
    padding: 12px 44px 12px 20px;
    border: 1px solid var(--victrix-border);
    border-radius: var(--victrix-radius);
    background: var(--victrix-surface);
    color: var(--victrix-text);
    font-family: var(--victrix-carattere);
    font-size: 14px;
    letter-spacing: .04em;
    outline: none;
    transition: border-color .3s ease;
}
.victrix-cerca-rivenditori .victrix-cerca-rivenditori-campo::placeholder {
    color: var(--victrix-muted);
}
.victrix-cerca-rivenditori .victrix-cerca-rivenditori-campo:hover,
.victrix-cerca-rivenditori .victrix-cerca-rivenditori-campo:focus {
    border-color: var(--victrix-muted);
}
/* La crocetta del campo "search" di Chrome e Safari: la X la mette gia' il
   chip del filtro, e quella del browser e' blu. */
.victrix-cerca-rivenditori-campo::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.victrix-cerca-rivenditori-segno {
    position: absolute;
    top: 50%;
    right: 16px;
    display: flex;
    transform: translateY(-50%);
    color: var(--victrix-muted);
    pointer-events: none;
}

/* Il filtro attivo sopra l'elenco ("Armenia ×") e il messaggio vuoto. */
.victrix-rivenditori-filtro {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    font-size: 12px;
    letter-spacing: .08em;
}
.victrix-rivenditori-filtro[hidden],
.victrix-rivenditori-vuoto[hidden],
.victrix-rivenditori-blocco[hidden],
.victrix-rivenditore[hidden] {
    display: none;
}
.victrix-rivenditori .victrix-rivenditori-filtro-x {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--victrix-border);
    border-radius: 50%;
    background: none;
    color: var(--victrix-text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.victrix-rivenditori .victrix-rivenditori-filtro-x:hover,
.victrix-rivenditori .victrix-rivenditori-filtro-x:focus-visible {
    background: none;
    border-color: var(--victrix-text);
    color: var(--victrix-text);
}
.victrix-rivenditori-vuoto {
    margin: 0 0 24px;
    color: var(--victrix-muted);
    font-size: 14px;
}

/* --- Chiusura: Dealer | Contattaci ------------------------------------------
   Modello Elementor "Victrix — Dealer e contatti" (inc/contatti-prodotto.php):
   misure e colori sono nell'editor, qui solo cio' che l'editor non dice.
   Sta qui e non in scheda-modello.css perche' la chiusura c'e' anche in fondo
   alle pagine di linea (revisione di Marika), dove quel foglio non arriva. */

/* "Configurazione di interesse" nei modelli senza serie: il campo diventa
   nascosto, e il suo contenitore non deve lasciare un buco nella griglia. */
.vx-contatti .vx-campo-nascosto {
    display: none !important;
}

.vx-contatti-modulo select {
    -webkit-appearance: none;
    appearance: none;
}

/* La spunta della privacy si spiega da sola: niente etichetta sopra. */
.vx-contatti-modulo .elementor-field-type-acceptance > .elementor-field-label {
    display: none;
}

.vx-contatti-modulo .elementor-field-type-acceptance label {
    font-size: 12px;
    letter-spacing: 0;
    line-height: 1.7;
    text-transform: none;
}

.vx-contatti-modulo .elementor-field-type-acceptance a {
    color: #fff;
}

/* Video di sfondo: se il browser non lo fa partire da solo (risparmio
   energetico, Safari con la riproduzione automatica spenta) mostra il suo
   tasto play al centro, che qui non serve a niente: resta il nero. */
.elementor-background-video-hosted::-webkit-media-controls,
.elementor-background-video-hosted::-webkit-media-controls-panel,
.elementor-background-video-hosted::-webkit-media-controls-start-playback-button,
.elementor-background-video-hosted::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
}