/*!
 * Product Compare Hub — stile pubblico
 * Design moderno, futuristico e pulito: sfondo chiaro, superfici in vetro,
 * accento a gradiente violetto→blu→ciano, tipografia Space Grotesk + Manrope
 * di base (personalizzabile per tema — vedi PCX_Admin::color_themes(): i 3
 * temi "SvetiX" usano Fraunces + Figtree e angoli squadrati invece delle
 * pillole arrotondate, per seguire l'aspetto reale del sito svetix.ch).
 * Tutte le classi sono prefissate "pcx-" per non entrare in conflitto con il tema.
 */

/* Rete di sicurezza globale: se per qualunque motivo del markup del plugin
   finisse fuori da tutti i contenitori elencati qui sotto, questi valori
   di base evitano che le custom property restino indefinite (che per icone
   e testo vorrebbe dire, ad es., un'icona SVG enorme invece che assente). */
:root {
	--pcx-accent-from: #7C3AED;
	--pcx-accent-mid: #4F46E5;
	--pcx-accent-to: #22D3EE;
	--pcx-gallery-shape: 1/1;
	--pcx-gallery-max-height: 520px;
	--pcx-card-shape: 4/3;
	--pcx-scale: 1;
	--pcx-content-max-width: 1240px;
	--pcx-radius-pill: 999px;
}

.pcx-catalog,
.pcx-single,
.pcx-compare-static,
.pcx-modal-overlay,
.pcx-compare-bar,
.pcx-archive-header,
.pcx-theme-wrap {
	--pcx-accent-from: #7C3AED;
	--pcx-accent-mid: #4F46E5;
	--pcx-accent-to: #22D3EE;
	--pcx-gradient: linear-gradient(135deg, var(--pcx-accent-from) 0%, var(--pcx-accent-mid) 55%, var(--pcx-accent-to) 100%);
	--pcx-bg: #FAFAFD;
	--pcx-surface: #FFFFFF;
	--pcx-surface-alt: #F3F4F9;
	--pcx-border: #E7E8F2;
	--pcx-text: #14141F;
	--pcx-text-soft: #5B5D70;
	--pcx-text-faint: #9598AB;
	--pcx-radius-sm: 10px;
	--pcx-radius: 18px;
	--pcx-radius-lg: 26px;
	--pcx-gallery-shape: 1/1;
	--pcx-gallery-max-height: 520px;
	--pcx-card-shape: 4/3;
	--pcx-scale: 1;
	--pcx-content-max-width: 1240px;
	--pcx-shadow-sm: 0 1px 2px rgba(20, 20, 40, .05), 0 1px 1px rgba(20,20,40,.04);
	--pcx-shadow: 0 10px 30px -12px rgba(30, 20, 90, .18);
	--pcx-shadow-lg: 0 24px 60px -16px rgba(30, 20, 90, .28);
	--pcx-font-heading: 'Space Grotesk', 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
	--pcx-font-body: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
	--pcx-radius-pill: 999px;
	color: var(--pcx-text);
	font-family: var(--pcx-font-body);
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------- */
/* Reset leggero, scoperto ai soli componenti del plugin                  */
/* ---------------------------------------------------------------------- */
.pcx-catalog, .pcx-catalog *,
.pcx-single, .pcx-single *,
.pcx-compare-static, .pcx-compare-static *,
.pcx-modal-overlay, .pcx-modal-overlay *,
.pcx-compare-bar, .pcx-compare-bar * {
	box-sizing: border-box;
}
.pcx-catalog img, .pcx-single img, .pcx-compare-static img { max-width: 100%; display: block; }
.pcx-catalog ul, .pcx-single ul { list-style: none; margin: 0; padding: 0; }
.pcx-catalog button, .pcx-single button, .pcx-compare-static button, .pcx-modal button {
	font-family: inherit;
}

.pcx-theme-wrap { background: var(--pcx-bg); }

.pcx-archive-header {
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 24px 6px;
	text-align: center;
}
.pcx-archive-title {
	font-family: var(--pcx-font-heading);
	font-size: calc(clamp(28px, 4vw, 44px) * var(--pcx-scale));
	font-weight: 700;
	margin: 0 0 8px;
	background: var(--pcx-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pcx-archive-subtitle { color: var(--pcx-text-soft); font-size: calc(16px * var(--pcx-scale)); max-width: 640px; margin: 0 auto; }

/* ---------------------------------------------------------------------- */
/* Bottoni                                                                 */
/* ---------------------------------------------------------------------- */
.pcx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--pcx-radius-pill);
	padding: 12px 22px;
	font-weight: 600;
	font-size: calc(14.5px * var(--pcx-scale));
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
	line-height: 1.2;
	white-space: nowrap;
}
.pcx-btn svg { width: calc(17px * var(--pcx-scale)); height: calc(17px * var(--pcx-scale)); flex: none; }
/* Come per .pcx-filter-toggle-count: senza questa regola l'attributo HTML
   "hidden" (usato ad es. da #pcx-load-more quando c'è una sola pagina di
   risultati) non basta a nascondere un elemento con questa classe, perché
   ha la stessa specificità di [hidden] e "display: inline-flex" vince. */
.pcx-btn[hidden] { display: none; }
.pcx-btn-primary {
	/* !important come in .pcx-card-meta-price qui sotto: quando questo stile
	   e' su un tag <a> (es. "Vedi scheda tecnica" nella card catalogo), il
	   CSS del tema del sito (Svetix Companion, effects.css, regola
	   ".sx-fx-link .sx-entry-content a:not(.sx-btn)...") ha specificita' piu'
	   alta e sostituisce lo sfondo con un sottile sottolineato animato color
	   "currentcolor" (cioe' bianco, uguale al testo) - il pulsante restava
	   con sfondo trasparente e testo bianco su sfondo bianco, invisibile.
	   Scoperto il 10/9/2026 da segnalazione dal vivo ("non si vede scritta
	   scheda tecnica"). */
	background: var(--pcx-gradient) !important;
	color: #fff !important;
	box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--pcx-accent-mid) 55%, transparent);
}
.pcx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--pcx-accent-mid) 60%, transparent); }
.pcx-btn-primary.is-added { background: #16A34A; box-shadow: 0 10px 24px -8px rgba(22, 163, 74, .5); }
.pcx-btn-ghost {
	background: var(--pcx-surface);
	color: var(--pcx-text);
	border-color: var(--pcx-border);
}
.pcx-btn-ghost:hover { border-color: var(--pcx-accent-mid); color: var(--pcx-accent-mid); transform: translateY(-1px); }
.pcx-btn-sm { padding: 8px 16px; font-size: calc(13px * var(--pcx-scale)); }
.pcx-btn-lg { padding: 15px 28px; font-size: calc(15.5px * var(--pcx-scale)); }
.pcx-btn input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

.pcx-compare-toggle { position: relative; }
.pcx-compare-toggle:has(input:checked),
.pcx-compare-toggle.is-checked {
	background: var(--pcx-gradient);
	color: #fff;
	border-color: transparent;
}

/* ---------------------------------------------------------------------- */
/* Toolbar: ricerca + filtri                                              */
/* ---------------------------------------------------------------------- */
.pcx-catalog { max-width: 1240px; margin: 0 auto; padding: 8px 24px 80px; }

.pcx-toolbar { display: flex; gap: 10px; margin-bottom: 0; flex-wrap: wrap; align-items: stretch; }

/*
 * Ricerca, pulsante "Filtri" e pannello filtri hanno 5 stili grafici tra cui
 * scegliere da "Cellulari" > Impostazioni (vedi PCX_Admin::toolbar_styles()),
 * applicati con una classe pcx-toolbar-style-* sul contenitore .pcx-catalog.
 * Le regole qui sotto (senza prefisso) sono lo stile "Minimale": fanno anche
 * da base/fallback, i 4 stili successivi sovrascrivono solo ciò che cambia.
 * In tutti gli stili il pannello filtri parte chiuso (vedi .pcx-filters più
 * sotto) e si apre con #pcx-filter-toggle (gestito in public.js).
 */
.pcx-search-box {
	flex: 1 1 220px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	/* Bordo sottile nel colore del tema (prima "none"): su richiesta della
	   cliente, allineato al pulsante "Filtri" accanto invece di restare un
	   blocco pieno senza contorno. */
	border: 1.5px solid var(--pcx-border);
	background: var(--pcx-surface-alt);
	/* Raggio fisso 10px (prima var(--pcx-radius-pill), quasi squadrato col
	   tema SvetiX attuale a 4px): stessa misura di .pcx-filter-toggle/
	   .pcx-dropdown select/.pcx-check span/#pcx-filters-reset qui sotto, così
	   tutta la riga filtri (barra di ricerca compresa) ha la stessa curva. */
	border-radius: 10px;
	padding: 10px 16px;
	transition: box-shadow .25s ease, border-color .18s ease;
}
.pcx-search-box:focus-within {
	border-color: var(--pcx-accent-mid);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcx-accent-mid) 18%, transparent);
}
.pcx-search-box svg {
	width: calc(15px * var(--pcx-scale));
	height: calc(15px * var(--pcx-scale));
	color: var(--pcx-text-faint);
	flex: none;
}
.pcx-search-box input {
	border: none; outline: none; flex: 1; min-width: 0; font-size: calc(14.5px * var(--pcx-scale)); background: transparent; color: var(--pcx-text);
	font-family: var(--pcx-font-body);
}
.pcx-search-box input::placeholder { color: var(--pcx-text-faint); }

.pcx-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	border: 1.5px solid var(--pcx-border);
	background: var(--pcx-surface);
	color: var(--pcx-text);
	/* Raggio fisso (non var(--pcx-radius-pill)): allineato su richiesta della
	   cliente all'aspetto di /listino-prezzi-dispositivi/ (SvetiX Phone
	   Pricing), dove tendine e pulsanti dei filtri usano 10px, non la pillola
	   piena. Scelta apposta indipendente dal tema colore attivo: un angolo
	   leggermente arrotondato sta bene con qualunque palette, mentre i colori
	   (che invece SONO parte del tema) restano quelli di sempre. */
	border-radius: 10px;
	padding: 10px 18px;
	font-family: var(--pcx-font-body);
	font-weight: 600;
	font-size: calc(13.5px * var(--pcx-scale));
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.pcx-filter-toggle:hover { transform: translateY(-1px); }
.pcx-filter-toggle svg { width: calc(14px * var(--pcx-scale)); height: calc(14px * var(--pcx-scale)); flex: none; }
.pcx-filter-toggle-chevron { transition: transform .2s ease; }
.pcx-filter-toggle[aria-expanded="true"] { border-color: var(--pcx-accent-mid); color: var(--pcx-accent-mid); }
.pcx-filter-toggle[aria-expanded="true"] .pcx-filter-toggle-chevron { transform: rotate(90deg); }
.pcx-filter-toggle-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(17px * var(--pcx-scale));
	height: calc(17px * var(--pcx-scale));
	padding: 0 5px;
	border-radius: var(--pcx-radius-pill);
	background: var(--pcx-gradient);
	color: #fff;
	font-size: calc(10.5px * var(--pcx-scale));
	font-weight: 700;
	flex: none;
}
/* L'attributo HTML "hidden" ha la stessa specificità della classe qui sopra:
   senza questa regola resterebbe visibile (con "0") anche a filtri azzerati. */
.pcx-filter-toggle-count[hidden] {
	display: none;
}

.pcx-filters {
	display: none;
	position: relative;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px 18px;
	background: var(--pcx-surface);
	border: 1px solid var(--pcx-border);
	border-radius: var(--pcx-radius);
	padding: 16px 18px 14px;
	margin-top: 10px;
	margin-bottom: 12px;
	box-shadow: var(--pcx-shadow-sm);
}
.pcx-filters.is-open { display: grid; }

.pcx-filter-group h4 {
	position: relative;
	font-family: var(--pcx-font-heading);
	font-size: calc(11.5px * var(--pcx-scale));
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pcx-text-soft);
	margin: 0 0 6px;
	padding-left: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.pcx-filter-group h4::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--pcx-gradient);
	box-shadow: 0 0 7px color-mix(in srgb, var(--pcx-accent-mid) 65%, transparent);
}
/* Tendina a scelta singola: usata solo per "Modello" (PCX_Shortcodes::
render_model_dropdown()), per saltare a un telefono preciso — Marca, RAM e
Memoria interna sono invece caselle multiple, vedi .pcx-filter-options/
.pcx-check piu' sotto. Una <select> nativa — già accessibile e ottimizzata
su mobile da sola — rivestita con l'aspetto del plugin: pillola con bordo
sfumato nel colore accento del tema attivo (stessa tecnica a doppio sfondo
di .pcx-img-effect-border), cosi' si adatta da sola a ciascuno dei temi
chiari/scuri senza bisogno di regole a parte. */
.pcx-dropdown {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}
.pcx-dropdown select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1.5px solid transparent;
	background-image: linear-gradient(var(--pcx-surface), var(--pcx-surface)), var(--pcx-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	/* 10px fisso come sopra in .pcx-filter-toggle: stessa misura della
	   tendina "Marca"/"Modello" di /listino-prezzi-dispositivi/. */
	border-radius: 10px;
	padding: 10px 34px 10px 16px;
	font-family: var(--pcx-font-body);
	font-size: calc(13.5px * var(--pcx-scale));
	font-weight: 600;
	color: var(--pcx-text);
	cursor: pointer;
	transition: box-shadow .18s ease, transform .18s ease;
}
.pcx-dropdown select:hover { transform: translateY(-1px); }
.pcx-dropdown select:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcx-accent-mid) 22%, transparent);
}
/* Mentre è selezionata l'opzione vuota (= nessun filtro) il testo resta
attenuato, per distinguere a colpo d'occhio un filtro davvero attivo. */
.pcx-dropdown select:has(option[value=""]:checked) {
	color: var(--pcx-text-faint);
	font-weight: 500;
}
.pcx-dropdown select:not(:has(option[value=""]:checked)) {
	box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--pcx-accent-mid) 55%, transparent);
}
.pcx-dropdown-arrow {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	width: calc(11px * var(--pcx-scale));
	height: calc(11px * var(--pcx-scale));
	color: var(--pcx-text-faint);
	pointer-events: none;
	flex: none;
}

/* Caselle multiple ("chip"): usate per Marca, RAM e Memoria interna
(PCX_Shortcodes::render_filter_chip_group()) — a differenza della tendina
"Modello" qui sopra, si possono selezionare piu' valori insieme. La casella
nativa resta nel markup (sempre accessibile/utilizzabile da tastiera) ma
invisibile: a comparire e' lo <span> accanto, con un pallino che si riempie
del gradiente del tema quando spuntato. */
.pcx-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pcx-check {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}
/* Specificità più alta di [hidden] rispetto alla regola "display" qui sopra:
senza questa riga il solo attributo hidden non basterebbe a nascondere per
davvero le opzioni oltre soglia, che è tutto il senso del collasso "+N altre". */
.pcx-check[hidden] {
	display: none;
}
.pcx-check input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.pcx-check span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	/* 10px fisso come .pcx-filter-toggle/.pcx-dropdown select qui sopra: stessa
	   misura dei controlli filtro di /listino-prezzi-dispositivi/. */
	border-radius: 10px;
	border: 1.5px solid var(--pcx-border);
	background: var(--pcx-surface);
	font-family: var(--pcx-font-body);
	font-size: calc(13px * var(--pcx-scale));
	font-weight: 600;
	color: var(--pcx-text-soft);
	transition: border-color .16s ease, color .16s ease, box-shadow .16s ease;
	user-select: none;
}
.pcx-check span::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1.5px solid var(--pcx-border);
	flex: none;
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.pcx-check:hover span {
	border-color: color-mix(in srgb, var(--pcx-accent-mid) 45%, var(--pcx-border));
	color: var(--pcx-text);
}
.pcx-check input:checked + span {
	border-color: transparent;
	background-image: linear-gradient(var(--pcx-surface), var(--pcx-surface)), var(--pcx-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	color: var(--pcx-text);
	box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--pcx-accent-mid) 55%, transparent);
}
.pcx-check input:checked + span::before {
	background: var(--pcx-gradient);
	border-color: transparent;
	transform: scale(1.15);
}
.pcx-check input:focus-visible + span {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcx-accent-mid) 22%, transparent);
}
@media (prefers-reduced-motion: reduce) {
	.pcx-check span, .pcx-check span::before { transition: none; }
}
/* "+N altre": compare solo quando un gruppo (tipicamente Marca, con molte
marche) supera la soglia di opzioni sempre visibili; le opzioni oltre soglia
restano nel markup con [hidden], il JS toglie l'attributo al click. */
.pcx-filter-more-toggle {
	display: block;
	margin-top: 8px;
	border: none;
	background: none;
	padding: 0;
	font-family: var(--pcx-font-body);
	font-size: calc(12.5px * var(--pcx-scale));
	font-weight: 600;
	color: var(--pcx-accent-mid);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Stessa ragione di .pcx-check[hidden] qui sopra: senza questa riga il
pulsante non sparirebbe davvero dopo il click (self.hidden = true in JS). */
.pcx-filter-more-toggle[hidden] {
	display: none;
}
.pcx-filter-more-toggle:hover { color: var(--pcx-accent-to); }

/* ------------------------------------------------------------------------ */
/* Stili grafici per la barra ricerca+filtri ("Pannello sempre aperto")     */
/* La classe .pcx-toolbar-style-* arriva dall'impostazione admin            */
/* PCX_Admin::toolbar_styles(). "minimal" è lo stile base sopra e non ha    */
/* bisogno di un blocco a parte: qui sotto le 4 varianti aggiuntive.        */
/* ------------------------------------------------------------------------ */

/* ---- "gradient": pulsante Filtri a capsula sfumata piena ---- */
.pcx-toolbar-style-gradient .pcx-filter-toggle {
	border-color: transparent;
	background: var(--pcx-gradient);
	color: #fff;
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--pcx-accent-mid) 55%, transparent);
}
.pcx-toolbar-style-gradient .pcx-filter-toggle:hover {
	box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--pcx-accent-mid) 65%, transparent);
}
.pcx-toolbar-style-gradient .pcx-filter-toggle[aria-expanded="true"] {
	border-color: transparent;
	color: #fff;
}
.pcx-toolbar-style-gradient .pcx-filter-toggle-count {
	background: #fff;
	color: var(--pcx-accent-mid);
}
.pcx-toolbar-style-gradient .pcx-search-box:focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcx-accent-mid) 22%, transparent);
}

/* ---- "dark": barra scura a contrasto ---- */
.pcx-toolbar-style-dark .pcx-toolbar {
	background: linear-gradient(135deg, #211C3F 0%, #171331 100%);
	border-radius: var(--pcx-radius);
	padding: 8px;
	box-shadow: var(--pcx-shadow);
}
.pcx-toolbar-style-dark .pcx-search-box {
	background: rgba(255, 255, 255, .08);
}
.pcx-toolbar-style-dark .pcx-search-box svg {
	color: rgba(255, 255, 255, .55);
}
.pcx-toolbar-style-dark .pcx-search-box input {
	color: #fff;
}
.pcx-toolbar-style-dark .pcx-search-box input::placeholder {
	color: rgba(255, 255, 255, .45);
}
.pcx-toolbar-style-dark .pcx-search-box:focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcx-accent-to) 35%, transparent);
}
.pcx-toolbar-style-dark .pcx-filter-toggle {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: #fff;
}
.pcx-toolbar-style-dark .pcx-filter-toggle:hover {
	border-color: rgba(255, 255, 255, .32);
	background: rgba(255, 255, 255, .1);
}
.pcx-toolbar-style-dark .pcx-filter-toggle[aria-expanded="true"] {
	border-color: var(--pcx-accent-to);
	color: var(--pcx-accent-to);
	background: rgba(255, 255, 255, .1);
}

/* ---- "soft": card tenue, ricerca e Filtri in un unico blocco ---- */
.pcx-toolbar-style-soft .pcx-toolbar {
	background: var(--pcx-surface-alt);
	border: 1px solid var(--pcx-border);
	border-radius: var(--pcx-radius);
	padding: 8px;
}
.pcx-toolbar-style-soft .pcx-search-box {
	background: var(--pcx-surface);
	box-shadow: var(--pcx-shadow-sm);
}
.pcx-toolbar-style-soft .pcx-filter-toggle {
	background: var(--pcx-surface);
	border-color: var(--pcx-border);
	box-shadow: var(--pcx-shadow-sm);
}
.pcx-toolbar-style-soft .pcx-filter-toggle[aria-expanded="true"] {
	background: var(--pcx-gradient);
	border-color: transparent;
	color: #fff;
}
.pcx-toolbar-style-soft .pcx-filter-toggle[aria-expanded="true"] .pcx-filter-toggle-count {
	background: #fff;
	color: var(--pcx-accent-mid);
}
.pcx-toolbar-style-soft .pcx-filters.is-open {
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top-color: transparent;
}
.pcx-toolbar-style-soft .pcx-toolbar:has(+ .pcx-filters.is-open) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-bottom: -1px;
}

/* ---- "glass": vetro flottante con sfocatura ---- */
.pcx-toolbar-style-glass .pcx-toolbar {
	position: relative;
	background: color-mix(in srgb, var(--pcx-surface) 65%, transparent);
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: var(--pcx-radius-lg);
	padding: 8px;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	box-shadow: var(--pcx-shadow);
	overflow: hidden;
	isolation: isolate;
}
.pcx-toolbar-style-glass .pcx-toolbar::before,
.pcx-toolbar-style-glass .pcx-toolbar::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(30px);
	z-index: -1;
	opacity: .5;
	pointer-events: none;
}
.pcx-toolbar-style-glass .pcx-toolbar::before {
	width: 140px;
	height: 140px;
	top: -60px;
	left: -30px;
	background: var(--pcx-accent-from);
}
.pcx-toolbar-style-glass .pcx-toolbar::after {
	width: 160px;
	height: 160px;
	bottom: -80px;
	right: -30px;
	background: var(--pcx-accent-to);
}
.pcx-toolbar-style-glass .pcx-search-box {
	background: color-mix(in srgb, var(--pcx-surface) 55%, transparent);
}
.pcx-toolbar-style-glass .pcx-filter-toggle {
	background: color-mix(in srgb, var(--pcx-surface) 55%, transparent);
}

.pcx-filters #pcx-filters-reset {
	padding: 7px 14px;
	font-size: calc(13px * var(--pcx-scale));
	/* Bordo pieno neutro invece che tratteggiato/color-mix, e stesso raggio
	   10px degli altri controlli filtro qui sopra: allineato al pulsante
	   "Reset" di /listino-prezzi-dispositivi/, che usa un bordo sottile
	   pieno neutro, non tratteggiato. Il tocco di colore accento resta
	   comunque al passaggio del mouse, vedi :hover subito sotto. */
	border-radius: 10px;
	border: 1.5px solid var(--pcx-border);
	background: transparent;
	color: var(--pcx-text-soft);
}
.pcx-filters #pcx-filters-reset:hover {
	border-style: solid;
	border-color: var(--pcx-accent-mid);
	color: var(--pcx-accent-mid);
	background: color-mix(in srgb, var(--pcx-accent-mid) 6%, transparent);
}

.pcx-results-count { color: var(--pcx-text-faint); font-size: calc(13.5px * var(--pcx-scale)); margin: 4px 2px 14px; min-height: 18px; }

/* ---------------------------------------------------------------------- */
/* Disposizione alternativa: barra laterale filtri (impostazioni catalogo) */
/* ---------------------------------------------------------------------- */
.pcx-layout-sidebar {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 22px;
	align-items: start;
}
.pcx-sidebar-filters {
	display: block;
	position: sticky;
	top: 16px;
	border: 1.5px solid transparent;
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--pcx-surface) 96%, var(--pcx-accent-from) 4%), color-mix(in srgb, var(--pcx-surface) 93%, var(--pcx-accent-to) 4%)) padding-box,
		linear-gradient(160deg, color-mix(in srgb, var(--pcx-accent-from) 48%, var(--pcx-border)), color-mix(in srgb, var(--pcx-accent-to) 48%, var(--pcx-border))) border-box;
	border-radius: var(--pcx-radius);
	padding: 14px;
	backdrop-filter: blur(22px) saturate(170%);
	-webkit-backdrop-filter: blur(22px) saturate(170%);
	box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--pcx-accent-mid) 55%, transparent), var(--pcx-shadow-sm);
}
.pcx-sidebar-search { margin-bottom: 14px; }
.pcx-sidebar-filters .pcx-filter-group { margin-bottom: 14px; }
.pcx-sidebar-filters .pcx-filter-group:last-of-type { margin-bottom: 0; }
/* Nella colonna laterale (230px) le chip restano leggermente piu' compatte,
per non forzare troppe righe con marche/valori numerosi. */
.pcx-sidebar-filters .pcx-filter-options { gap: 5px; }
.pcx-sidebar-filters .pcx-check span { padding: 6px 11px; font-size: calc(12px * var(--pcx-scale)); }
.pcx-sidebar-reset { width: 100%; justify-content: center; margin-top: 18px; }
.pcx-catalog-sidebar-layout .pcx-results-count { margin-top: 0; }

@media (max-width: 900px) {
	.pcx-layout-sidebar { grid-template-columns: 1fr; }
	.pcx-sidebar-filters { position: static; }
}

/* ---------------------------------------------------------------------- */
/* Griglia e card prodotto                                                */
/* ---------------------------------------------------------------------- */
.pcx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}

.pcx-card {
	background: var(--pcx-surface);
	border: 1px solid var(--pcx-border);
	border-radius: var(--pcx-radius);
	overflow: hidden;
	box-shadow: var(--pcx-shadow-sm);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	display: flex;
	flex-direction: column;
}
.pcx-card:hover { transform: translateY(-4px); box-shadow: var(--pcx-shadow); border-color: color-mix(in srgb, var(--pcx-accent-from) 28%, transparent); }

.pcx-card-media {
	position: relative;
	display: block;
	aspect-ratio: var(--pcx-card-shape);
	background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--pcx-accent-from) 14%, var(--pcx-surface-alt)) 0%, var(--pcx-surface-alt) 60%);
	overflow: hidden;
}
.pcx-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; transition: transform .35s ease; }
.pcx-card:hover .pcx-card-media img { transform: scale(1.05); }
.pcx-card-media-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--pcx-text-faint); }
.pcx-card-media-placeholder svg { width: calc(40px * var(--pcx-scale)); height: calc(40px * var(--pcx-scale)); }

.pcx-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(20, 20, 31, .78);
	color: #fff;
	font-size: calc(11.5px * var(--pcx-scale));
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: var(--pcx-radius-pill);
	backdrop-filter: blur(4px);
}
.pcx-badge-lg { position: static; background: var(--pcx-gradient); font-size: calc(12.5px * var(--pcx-scale)); padding: 7px 16px; margin-bottom: 14px; display: inline-block; }

.pcx-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcx-card-title { font-family: var(--pcx-font-heading); font-size: calc(17.5px * var(--pcx-scale)); font-weight: 700; margin: 0; line-height: 1.3; }
.pcx-card-title a { color: var(--pcx-text); text-decoration: none; }
.pcx-card-title a:hover { color: var(--pcx-accent-mid); }
.pcx-card-subtitle { font-size: calc(13.5px * var(--pcx-scale)); color: var(--pcx-text-soft); margin: -4px 0 0; line-height: 1.45; }

.pcx-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pcx-card-meta li {
	font-size: calc(12px * var(--pcx-scale));
	color: var(--pcx-text-soft);
	background: var(--pcx-surface-alt);
	border-radius: var(--pcx-radius-pill);
	padding: 4px 10px;
}
.pcx-card-meta li.pcx-card-meta-release {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--pcx-accent-mid);
	background: color-mix(in srgb, var(--pcx-accent-mid) 12%, transparent);
	font-weight: 600;
}
.pcx-card-meta-release svg { width: calc(11px * var(--pcx-scale)); height: calc(11px * var(--pcx-scale)); flex: none; }

.pcx-card-colors { display: flex; gap: 6px; margin-top: 2px; }
.pcx-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--pcx-text) 12%, transparent); }

.pcx-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.pcx-card-actions .pcx-btn { flex: 1; padding-left: 14px; padding-right: 14px; font-size: calc(13.5px * var(--pcx-scale)); }

.pcx-empty { color: var(--pcx-text-faint); padding: 40px 10px; text-align: center; grid-column: 1 / -1; }

.pcx-load-more-wrap { display: flex; justify-content: center; margin-top: 34px; }

/* ---------------------------------------------------------------------- */
/* Icone e badge circolari a gradiente                                    */
/* ---------------------------------------------------------------------- */
.pcx-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(34px * var(--pcx-scale));
	height: calc(34px * var(--pcx-scale));
	border-radius: 50%;
	background: var(--pcx-gradient);
	color: #fff;
	flex: none;
}
.pcx-icon-badge svg { width: calc(17px * var(--pcx-scale)); height: calc(17px * var(--pcx-scale)); }

/* ---------------------------------------------------------------------- */
/* Bottone informativo (popup glossario), ovunque nel plugin              */
/* ---------------------------------------------------------------------- */
.pcx-info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(21px * var(--pcx-scale));
	height: calc(21px * var(--pcx-scale));
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--pcx-accent-mid) 60%, transparent);
	background: color-mix(in srgb, var(--pcx-accent-mid) 15%, transparent);
	color: var(--pcx-accent-mid);
	margin-left: 6px;
	cursor: pointer;
	vertical-align: -5px;
	transition: all .15s ease;
	flex: none;
	box-shadow: 0 1px 3px rgba(20,20,40,.08);
	/* "i" di testo vero invece di un'icona a tratto sottile: molto più
	   leggibile a colpo d'occhio (vedi PCX_Render::info_button()). */
	font-family: var(--pcx-font-heading);
	font-weight: 700;
	font-size: calc(13px * var(--pcx-scale));
	line-height: 1;
}
.pcx-info-btn:hover, .pcx-info-btn:focus-visible {
	background: var(--pcx-gradient);
	border-color: transparent;
	transform: scale(1.1);
	box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--pcx-accent-mid) 45%, transparent);
	color: #fff;
	transform: scale(1.12);
	outline: none;
}

/* ---------------------------------------------------------------------- */
/* Pagina singolo prodotto                                                */
/* ---------------------------------------------------------------------- */
.pcx-single { max-width: 1180px; margin: 0 auto; padding: 40px 24px 90px; }

.pcx-single-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin-bottom: 48px;
}
@media (min-width: 900px) {
	.pcx-single-hero { grid-template-columns: 1.05fr 1fr; align-items: center; }
}

/* Galleria */
.pcx-gallery-main {
	position: relative;
	aspect-ratio: var(--pcx-gallery-shape);
	max-height: var(--pcx-gallery-max-height);
	border-radius: var(--pcx-radius-lg);
	background: var(--pcx-surface);
	border: 1px solid var(--pcx-border);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-in;
}
.pcx-gallery-glow {
	position: absolute;
	inset: -20%;
	background: var(--pcx-gradient);
	filter: blur(70px);
	opacity: .22;
	z-index: 0;
	animation: pcxPulse 7s ease-in-out infinite;
}
@keyframes pcxPulse { 0%, 100% { opacity: .16; transform: scale(1); } 50% { opacity: .28; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .pcx-gallery-glow { animation: none; } }

.pcx-gallery-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 36px;
	opacity: 0;
	z-index: 1;
	transition: opacity .4s ease, transform .4s ease;
	transform: scale(.97);
}
.pcx-gallery-image.is-active { opacity: 1; z-index: 2; transform: scale(1); }
.pcx-gallery-empty { color: var(--pcx-text-faint); z-index: 1; }
.pcx-gallery-empty svg { width: calc(60px * var(--pcx-scale)); height: calc(60px * var(--pcx-scale)); }

/* Badge "ingrandisci": nascosto finché non si passa sopra la galleria (sempre
visibile su touch, dove :hover non esiste - vedi media query sotto), cosi'
non affolla la card quando non serve. */
.pcx-gallery-zoom-hint {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	width: calc(38px * var(--pcx-scale));
	height: calc(38px * var(--pcx-scale));
	border-radius: 50%;
	border: 1px solid var(--pcx-border);
	background: var(--pcx-surface);
	color: var(--pcx-text-soft);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--pcx-shadow-lg);
	opacity: 0;
	transform: scale(.85);
	transition: opacity .18s ease, transform .18s ease, background .15s ease, color .15s ease;
}
.pcx-gallery-zoom-hint[hidden] { display: none; }
.pcx-gallery-zoom-hint svg { width: calc(16px * var(--pcx-scale)); height: calc(16px * var(--pcx-scale)); }
.pcx-gallery-zoom-hint:hover { background: var(--pcx-gradient); color: #fff; }
.pcx-gallery-main:hover .pcx-gallery-zoom-hint { opacity: 1; transform: scale(1); }
@media (hover: none) { .pcx-gallery-zoom-hint { opacity: .85; transform: scale(1); } }

.pcx-gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pcx-gallery-thumb {
	width: 60px; height: 60px;
	border-radius: 14px;
	border: 1.5px solid var(--pcx-border);
	background: var(--pcx-surface);
	padding: 6px;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
}
.pcx-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pcx-gallery-thumb:hover { transform: translateY(-2px); }
.pcx-gallery-thumb.is-active { border-color: var(--pcx-accent-mid); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }

.pcx-color-picker { margin-top: 22px; }
.pcx-color-picker-label { font-size: calc(13.5px * var(--pcx-scale)); color: var(--pcx-text-soft); display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.pcx-color-picker-label strong { color: var(--pcx-text); font-weight: 700; }

.pcx-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.pcx-swatch {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	padding: 3px;
	background: var(--pcx-border);
	cursor: pointer;
	position: relative;
	transition: background .2s ease, transform .18s ease;
}
.pcx-swatch::before {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--pcx-swatch-color, #ccc);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pcx-text) 12%, transparent);
	transition: transform .18s ease;
}
.pcx-swatch:hover { transform: translateY(-2px); }
.pcx-swatch:hover::before { transform: scale(1.06); }
.pcx-swatch.is-active { background: var(--pcx-gradient); }

/* Colonna info */
.pcx-single-title {
	font-family: var(--pcx-font-heading);
	font-size: calc(clamp(26px, 3.4vw, 38px) * var(--pcx-scale));
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.15;
}
.pcx-single-subtitle { color: var(--pcx-text-soft); font-size: calc(16px * var(--pcx-scale)); margin: 0 0 22px; line-height: 1.5; }

.pcx-single-release {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: calc(14px * var(--pcx-scale));
	color: var(--pcx-text-soft);
	background: var(--pcx-surface-alt);
	border-radius: var(--pcx-radius-pill);
	padding: 7px 12px;
	margin: -8px 0 20px;
}
.pcx-single-release svg { width: calc(15px * var(--pcx-scale)); height: calc(15px * var(--pcx-scale)); color: var(--pcx-accent-mid); flex: none; }
.pcx-single-release strong { color: var(--pcx-text); font-weight: 700; }
.pcx-single-release .pcx-info-btn { margin-left: 0; }

.pcx-variant-picker { margin-bottom: 18px; }
.pcx-variant-label { display: flex; align-items: center; font-size: calc(13px * var(--pcx-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pcx-text-soft); margin-bottom: 8px; }
.pcx-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pcx-pill {
	border: 1.5px solid var(--pcx-border);
	background: var(--pcx-surface);
	/* Esplicito e non lasciato all'ereditarietà: senza questa riga il testo
	   del bottone eredita il colore che il TEMA DEL SITO (non il plugin)
	   assegna di default a tutti i <button>, che su molti temi è bianco -
	   invisibile su questo sfondo chiaro (var(--pcx-surface)). Bug scoperto
	   in versione 1.17.3 su un tema chiaro del sito reale (mai notato prima
	   perché mascherato dai temi scuri usati fino a quel momento). */
	color: var(--pcx-text);
	border-radius: var(--pcx-radius-pill);
	padding: 9px 18px;
	font-size: calc(13.5px * var(--pcx-scale));
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
}
.pcx-pill:hover { border-color: var(--pcx-accent-mid); }
.pcx-pill.is-active { background: var(--pcx-gradient); border-color: transparent; color: #fff; }

.pcx-single-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 20px; }
.pcx-single-excerpt { color: var(--pcx-text-soft); line-height: 1.6; font-size: calc(15px * var(--pcx-scale)); }

.pcx-single-description {
	max-width: 820px;
	margin: 0 auto 56px;
	color: var(--pcx-text-soft);
	font-size: calc(16px * var(--pcx-scale));
	line-height: 1.75;
}
.pcx-single-description p { margin: 0 0 1em; }

/* Sezioni scheda tecnica */
.pcx-section-heading {
	font-family: var(--pcx-font-heading);
	font-size: calc(clamp(22px, 2.6vw, 30px) * var(--pcx-scale));
	font-weight: 700;
	text-align: center;
	margin: 0 0 6px;
}
.pcx-section-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--pcx-text-faint);
	font-size: calc(13.5px * var(--pcx-scale));
	margin: 0 0 32px;
}
.pcx-section-hint svg { width: calc(15px * var(--pcx-scale)); height: calc(15px * var(--pcx-scale)); }

.pcx-spec-section {
	background: var(--pcx-surface);
	border: 1px solid var(--pcx-border);
	border-radius: var(--pcx-radius);
	padding: 26px 28px;
	margin-bottom: 20px;
}
.pcx-spec-section-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--pcx-font-heading);
	font-size: calc(18px * var(--pcx-scale));
	font-weight: 700;
	margin: 0 0 18px;
}
.pcx-spec-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px) { .pcx-spec-grid { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

.pcx-spec-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--pcx-border);
	font-size: calc(14.5px * var(--pcx-scale));
}
/* flex-wrap + min-width:0 sul valore: se etichetta e valore non stanno più
   sulla stessa riga (testo lungo, o grandezza testo aumentata), il valore va
   a capo su una riga tutta sua invece di restringersi in uno spazio troppo
   stretto accanto all'etichetta o sporgere nella colonna accanto. A parità
   di spazio disponibile (valori brevi, grandezza normale) l'aspetto resta
   identico a prima: uno di fianco all'altro, sulla stessa riga. */
.pcx-spec-label { color: var(--pcx-text-soft); display: inline-flex; align-items: center; flex: none; }
.pcx-spec-value { color: var(--pcx-text); font-weight: 600; text-align: right; min-width: 0; }

.pcx-special-list { display: grid; gap: 10px; }
.pcx-special-list li {
	position: relative;
	padding-left: 26px;
	font-size: calc(14.5px * var(--pcx-scale));
	color: var(--pcx-text);
	line-height: 1.5;
}
.pcx-special-list li::before {
	content: '';
	position: absolute;
	left: 0; top: 6px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--pcx-gradient);
}

.pcx-related { margin-top: 60px; }
.pcx-related .pcx-section-heading { text-align: left; margin-bottom: 22px; }

/* ---------------------------------------------------------------------- */
/* Tabella di confronto                                                    */
/* ---------------------------------------------------------------------- */
.pcx-compare-static { max-width: 1180px; margin: 0 auto; padding: 20px 24px; }
.pcx-compare-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-radius: var(--pcx-radius); border: 1px solid var(--pcx-border); background: var(--pcx-surface); }

/* ---------------------------------------------------------------------- */
/* Larghezza del layout (impostazione "Larghezza del layout" in Impostazioni) */
/* Si applica a tutti e tre i contenitori principali: .pcx-catalog (sopra),  */
/* .pcx-single e .pcx-compare-static (qui sopra). "standard" non ha una      */
/* regola propria: usa semplicemente il max-width fisso già impostato sopra. */
/* ---------------------------------------------------------------------- */
.pcx-catalog.pcx-width-theme,
.pcx-single.pcx-width-theme,
.pcx-compare-static.pcx-width-theme {
	max-width: none;
}
.pcx-catalog.pcx-width-full,
.pcx-single.pcx-width-full,
.pcx-compare-static.pcx-width-full {
	max-width: none;
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.pcx-catalog.pcx-width-custom,
.pcx-single.pcx-width-custom,
.pcx-compare-static.pcx-width-custom {
	max-width: var(--pcx-content-max-width, 1240px);
}

/* Le colonne si dividono sempre lo spazio disponibile (colonna etichette a
larghezza fissa + N colonne telefono a larghezza uguale): con 2-3 modelli lo
scorrimento orizzontale non serve mai. Con 4 modelli su schermi molto stretti
può servire un minimo scorrimento: la colonna delle etichette (RAM, Memoria,
ecc.) resta comunque sempre visibile grazie a "position: sticky". */
.pcx-compare-table {
	--pcx-compare-label-w: 148px;
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}
.pcx-compare-col-label { width: var(--pcx-compare-label-w); }
.pcx-compare-col-phone { width: calc( ( 100% - var(--pcx-compare-label-w) ) / var(--pcx-compare-count, 2) ); }
.pcx-compare-table th, .pcx-compare-table td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--pcx-border);
	font-size: calc(14px * var(--pcx-scale));
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}
.pcx-compare-table thead th {
	background: var(--pcx-surface-alt);
	position: sticky;
	top: 0;
	vertical-align: top;
	white-space: normal;
}
.pcx-compare-row-label {
	color: var(--pcx-text-soft);
	font-weight: 600;
	white-space: normal;
	position: sticky;
	left: 0;
	background: var(--pcx-surface);
	z-index: 1;
	box-shadow: 2px 0 6px -3px color-mix(in srgb, var(--pcx-text) 15%, transparent);
}
.pcx-compare-table thead .pcx-compare-row-label { background: var(--pcx-surface-alt); z-index: 2; }
.pcx-compare-group-row td {
	background: var(--pcx-bg);
	font-family: var(--pcx-font-heading);
	font-weight: 700;
	font-size: calc(12.5px * var(--pcx-scale));
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--pcx-accent-mid);
	border-bottom: none;
	padding-top: 20px;
}
.pcx-compare-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--pcx-text); text-align: center; white-space: normal; }
.pcx-compare-head img { width: 72px; height: 72px; max-width: 100%; object-fit: contain; }
.pcx-compare-head span { font-weight: 700; font-size: calc(13.5px * var(--pcx-scale)); }
.pcx-compare-remove {
	border: none; background: var(--pcx-surface-alt); border-radius: 50%;
	width: calc(22px * var(--pcx-scale)); height: calc(22px * var(--pcx-scale)); display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; color: var(--pcx-text-faint); margin-bottom: 6px;
	/* "&times;" di testo vero invece di un'icona SVG a tratto sottile: molto
	   più leggibile a colpo d'occhio, come per .pcx-info-btn e .pcx-modal-close. */
	font-family: var(--pcx-font-heading);
	font-weight: 700;
	font-size: calc(12px * var(--pcx-scale));
	line-height: 1;
}
.pcx-compare-remove:hover { background: color-mix(in srgb, #DC2626 16%, var(--pcx-surface)); color: #DC2626; }

/* ---------------------------------------------------------------------- */
/* Modali (glossario + confronto)                                          */
/* ---------------------------------------------------------------------- */
.pcx-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 15, 26, .55);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.pcx-modal-overlay[hidden] { display: flex; }
.pcx-modal-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Il popup del glossario può essere aperto da dentro un altro popup (es. dal
confronto): deve sempre comparire sopra, mai dietro. */
#pcx-info-overlay { z-index: 100010; }

.pcx-modal {
	background: var(--pcx-surface);
	border-radius: var(--pcx-radius-lg);
	padding: 34px 32px;
	max-width: 440px;
	width: 100%;
	max-height: 86vh;
	overflow-y: auto;
	position: relative;
	box-shadow: var(--pcx-shadow-lg);
	transform: translateY(14px) scale(.98);
	transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.pcx-modal-overlay.is-open .pcx-modal { transform: translateY(0) scale(1); }
.pcx-modal-lg { max-width: 960px; }

.pcx-modal-eyebrow {
	display: inline-block;
	font-size: calc(11.5px * var(--pcx-scale));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: transparent;
	background: var(--pcx-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	margin-bottom: 8px;
}
.pcx-modal h3 { font-family: var(--pcx-font-heading); font-size: calc(21px * var(--pcx-scale)); margin: 0 0 12px; padding-right: 30px; }
.pcx-modal p { color: var(--pcx-text-soft); line-height: 1.65; font-size: calc(15px * var(--pcx-scale)); margin: 0; }

.pcx-modal-close {
	position: absolute;
	top: 18px; right: 18px;
	width: calc(32px * var(--pcx-scale)); height: calc(32px * var(--pcx-scale));
	border-radius: 50%;
	border: none;
	background: var(--pcx-surface-alt);
	color: var(--pcx-text-soft);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, color .15s ease, transform .15s ease;
	/* "&times;" di testo vero invece di un'icona SVG a tratto sottile: molto
	   più leggibile a colpo d'occhio, come per .pcx-info-btn qui sopra. */
	font-family: var(--pcx-font-heading);
	font-weight: 700;
	font-size: calc(20px * var(--pcx-scale));
	line-height: 1;
}
.pcx-modal-close:hover { background: var(--pcx-gradient); color: #fff; transform: rotate(90deg); }

/* ---------------------------------------------------------------------- */
/* Lightbox: ingrandimento immagine nella scheda prodotto                  */
/* ---------------------------------------------------------------------- */
.pcx-lightbox-overlay .pcx-lightbox {
	position: relative;
	background: none;
	box-shadow: none;
	padding: 0;
	max-width: min(94vw, 1000px);
	/* "fit-content" invece di "100%": il riquadro deve restringersi alla
	   larghezza reale dell'immagine (spesso stretta, essendo verticale)
	   invece di riempire sempre tutta la larghezza disponibile - altrimenti
	   chiusura e frecce (ancorate agli angoli di QUESTO riquadro, vedi piu'
	   sotto) restano lontane dall'immagine vera, sopra uno spazio vuoto
	   trasparente. "max-width" qui sopra resta com'era, come limite di
	   sicurezza per immagini orizzontali molto larghe. Segnalato dal vivo
	   dalla cliente il 20/9/2026 ("tasti... devono essere piu' vicini a
	   immagine"). */
	width: fit-content;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(.96);
	transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.pcx-lightbox-overlay.is-open .pcx-lightbox { transform: scale(1); }

.pcx-lightbox-stage {
	position: relative;
	/* Stessa ragione di .pcx-lightbox qui sopra: si restringe alla vera
	   larghezza dell'immagine, l'unico contenuto che conta qui dentro dato
	   che contatore e frecce sono fuori dal flusso (position:absolute).
	   "max-width" ripete quello del riquadro esterno cosi' non puo' mai
	   sporgerne fuori. */
	width: fit-content;
	max-width: min(94vw, 1000px);
	height: min(78vh, 640px);
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
}
.pcx-lightbox-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--pcx-radius-lg);
	background: var(--pcx-surface);
	box-shadow: var(--pcx-shadow-lg);
	padding: 28px;
}

.pcx-lightbox .pcx-modal-close { top: -6px; right: -6px; background: var(--pcx-surface); z-index: 3; }

.pcx-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: calc(46px * var(--pcx-scale));
	height: calc(46px * var(--pcx-scale));
	/* padding:0 - IMPORTANTE: il tema del sito (Svetix Companion) applica un
	   padding predefinito a TUTTI i bottoni <button> della pagina (circa 24px
	   a destra e a sinistra). Su questo bottone rotondo a larghezza fissa
	   (46px) quel padding da solo occupava gia' tutto lo spazio disponibile,
	   lasciando zero posto per l'icona dentro - ecco perche' si vedeva un
	   cerchio vuoto, senza nessuna freccia, anche se l'icona SVG aveva gia'
	   una sua larghezza esplicita corretta (vedi regola subito sotto). Causa
	   vera scoperta dal vivo il 20/9/2026 (segnalazione cliente "icona destra
	   sinistra"), misurando lo spazio realmente libero dentro al bottone. */
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--pcx-surface);
	color: var(--pcx-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--pcx-shadow-lg);
	transition: background .15s ease, color .15s ease;
	z-index: 2;
}
/* Larghezza/altezza esplicite sull'icona: tenute per sicurezza, cosi' la
   dimensione resta prevedibile e proporzionata a "--pcx-scale" a prescindere
   da altri stili del tema, invece di dipendere solo dallo spazio libero nel
   bottone (quello vero, risolto qui sopra con "padding: 0"). */
.pcx-lightbox-nav svg { width: calc(20px * var(--pcx-scale)) !important; height: calc(20px * var(--pcx-scale)); flex: none; }
/* ":hover" da solo resta qui come alternativa di sicurezza (es. se JS non
   parte): ".is-hovering" e' quella che comanda davvero in pratica, aggiunta e
   tolta da public.js con un piccolo margine di tempo, per non far sfarfallare
   il colore quando il cursore tocca appena il bordo del bottone - vedi la
   spiegazione completa vicino a "addHoverStability" in public.js. */
.pcx-lightbox-nav:hover, .pcx-lightbox-nav.is-hovering { background: var(--pcx-gradient); color: #fff; }
.pcx-lightbox-prev { left: -8px; }
.pcx-lightbox-next { right: -8px; }
.pcx-lightbox-prev svg { transform: rotate(180deg); }
.pcx-lightbox-nav[hidden] { display: none; }

.pcx-lightbox-counter {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	background: rgba(20, 20, 31, .78);
	color: #fff;
	font-size: calc(12.5px * var(--pcx-scale));
	padding: 6px 16px;
	border-radius: var(--pcx-radius-pill);
	white-space: nowrap;
	z-index: 3;
}
.pcx-lightbox-counter[hidden] { display: none; }

@media (max-width: 640px) {
	.pcx-lightbox .pcx-modal-close { top: -44px; right: 0; }
	.pcx-lightbox-prev { left: 4px; }
	.pcx-lightbox-next { right: 4px; }
	.pcx-lightbox-image { padding: 16px; }
	.pcx-lightbox-counter { font-size: calc(11.5px * var(--pcx-scale)); padding: 5px 12px; }
}

/* ---------------------------------------------------------------------- */
/* Barra flottante di confronto                                            */
/* ---------------------------------------------------------------------- */
.pcx-compare-bar {
	position: fixed;
	left: 50%;
	bottom: 22px;
	z-index: 9000;
	transform: translate(-50%, 140%);
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
	width: min(94vw, 560px);
}
.pcx-compare-bar[hidden] { display: block; }
.pcx-compare-bar.is-open { transform: translate(-50%, 0); }

.pcx-compare-bar-inner {
	background: rgba(20, 20, 31, .92);
	backdrop-filter: blur(10px);
	color: #fff;
	border-radius: var(--pcx-radius-pill);
	padding: 10px 12px 10px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: var(--pcx-shadow-lg);
	flex-wrap: wrap;
}
.pcx-compare-bar-thumbs { display: flex; gap: -6px; }
.pcx-compare-bar-thumbs img {
	width: 30px; height: 30px; border-radius: 50%; object-fit: contain; background: #fff;
	border: 2px solid rgba(20,20,31,.92);
	margin-left: -10px;
	padding: 2px;
}
.pcx-compare-bar-thumbs img:first-child { margin-left: 0; }
.pcx-compare-bar-count { font-size: calc(13.5px * var(--pcx-scale)); color: rgba(255,255,255,.75); white-space: nowrap; }
.pcx-compare-bar-actions { display: flex; gap: 8px; margin-left: auto; }
.pcx-compare-bar .pcx-btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.18); }
.pcx-compare-bar .pcx-btn-ghost:hover { border-color: #fff; color: #fff; }

/* ---------------------------------------------------------------------- */
/* Utility responsive                                                     */
/* ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	.pcx-catalog, .pcx-single, .pcx-compare-static { padding-left: 16px; padding-right: 16px; }
	.pcx-toolbar { gap: 8px; }
	.pcx-search-box, .pcx-filter-toggle { flex: 1 1 100%; }
	.pcx-filter-toggle { justify-content: center; }
	.pcx-search-box { padding: 8px 14px; }
	.pcx-filters { padding: 11px 14px 9px; gap: 6px 14px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
	.pcx-dropdown select { padding: 8px 30px 8px 14px; font-size: calc(12.5px * var(--pcx-scale)); }
	.pcx-check span { padding: 5px 10px; font-size: calc(12.5px * var(--pcx-scale)); }
	.pcx-filters #pcx-filters-reset { grid-column: 1 / -1; }
	.pcx-sidebar-filters { padding: 12px 14px; }
	.pcx-card-actions { flex-direction: column; }
	.pcx-card-actions .pcx-btn { width: 100%; }
	.pcx-compare-bar-inner { justify-content: center; }
	.pcx-compare-bar-actions { width: 100%; margin-left: 0; justify-content: center; }

	.pcx-modal-overlay { padding: 12px; }
	.pcx-modal { padding: 24px 16px; }

	.pcx-compare-table { --pcx-compare-label-w: 90px; }
	.pcx-compare-table th, .pcx-compare-table td { padding: 8px 6px; font-size: calc(12px * var(--pcx-scale)); }
	.pcx-compare-head { gap: 4px; }
	.pcx-compare-head img { width: 44px; height: 44px; }
	.pcx-compare-head span { font-size: calc(11px * var(--pcx-scale)); line-height: 1.25; }
	.pcx-compare-remove { width: calc(20px * var(--pcx-scale)); height: calc(20px * var(--pcx-scale)); }
}

@media (max-width: 380px) {
	.pcx-modal { padding: 18px 10px; }
	.pcx-compare-table { --pcx-compare-label-w: 78px; }
	.pcx-compare-table th, .pcx-compare-table td { padding: 7px 5px; font-size: calc(11px * var(--pcx-scale)); }
	.pcx-compare-head img { width: 36px; height: 36px; }
	.pcx-compare-head span { font-size: calc(10.5px * var(--pcx-scale)); }
}

/* Focus visibile accessibile su tutto il plugin */
.pcx-catalog :focus-visible,
.pcx-single :focus-visible,
.pcx-compare-static :focus-visible,
.pcx-modal :focus-visible,
.pcx-compare-bar :focus-visible {
	outline: 2px solid var(--pcx-accent-mid);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Effetto immagine (scheda prodotto + card catalogo)                     */
/* Classe pcx-img-effect-* dall'impostazione admin                        */
/* PCX_Admin::image_effects(): "none" non ha bisogno di regole a parte,   */
/* è l'aspetto attuale (nessuna modifica).                                */
/* ---------------------------------------------------------------------- */
.pcx-gallery-main.pcx-img-effect-shadow,
.pcx-card-media.pcx-img-effect-shadow {
	box-shadow: var(--pcx-shadow-lg);
}

.pcx-gallery-main.pcx-img-effect-border,
.pcx-card-media.pcx-img-effect-border {
	border: 2.5px solid transparent;
	background-image: linear-gradient(var(--pcx-surface), var(--pcx-surface)), var(--pcx-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.pcx-gallery-main.pcx-img-effect-glow .pcx-gallery-glow {
	opacity: .4;
	filter: blur(90px);
}
.pcx-card-media.pcx-img-effect-glow::before {
	content: '';
	position: absolute;
	inset: -35%;
	background: var(--pcx-gradient);
	filter: blur(38px);
	opacity: .35;
	z-index: 0;
}
.pcx-card-media.pcx-img-effect-glow img {
	position: relative;
	z-index: 1;
}

.pcx-gallery-main.pcx-img-effect-glass,
.pcx-card-media.pcx-img-effect-glass {
	background: color-mix(in srgb, var(--pcx-surface) 55%, transparent);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .6);
}

/* ---------------------------------------------------------------------- */
/* Sfondo galleria — scheda prodotto (impostazione gallery_background)    */
/* PCX_Admin::gallery_backgrounds(): "plain" (predefinito) nasconde       */
/* l'alone sfumato colorato e mostra uno sfondo bianco/neutro con una     */
/* sottile cornice sfumata; "glow" non ha bisogno di regole a parte, è    */
/* l'aspetto classico attuale (nessuna modifica).                         */
/* ---------------------------------------------------------------------- */
.pcx-gallery-main.pcx-gallery-bg-plain .pcx-gallery-glow {
	display: none;
}
.pcx-gallery-main.pcx-gallery-bg-plain {
	box-shadow:
		0 0 0 1px var(--pcx-border),
		0 0 16px 1px color-mix(in srgb, var(--pcx-accent-mid) 14%, transparent),
		0 16px 36px -20px color-mix(in srgb, var(--pcx-accent-mid) 22%, transparent);
}
/* Bug scoperto il 10/9/2026 da segnalazione dal vivo ("togliere effetto 3d"):
   la regola qui sopra (.pcx-gallery-main.pcx-gallery-bg-plain) e la regola
   .pcx-gallery-main.pcx-img-effect-shadow piu' in alto hanno la stessa
   specificita' CSS (due classi) - vince sempre quella scritta piu' in
   basso nel file, cioe' questa, indipendentemente da cosa l'admin sceglie
   in "Effetto immagine". Risultato: scegliere "Effetto immagine: Nessuno"
   non toglieva davvero l'ombra quando "Sfondo galleria" restava "Pulito"
   (l'impostazione predefinita) - l'ombra visibile sotto la foto prodotto
   (che da' l'impressione di profondita'/"3D") restava sempre uguale. Questa
   regola, con tre classi, e' piu' specifica di entrambe e si applica solo
   quando le due impostazioni sono scelte insieme: "Nessuno" ora azzera
   davvero anche questa ombra di base. */
.pcx-gallery-main.pcx-gallery-bg-plain.pcx-img-effect-none {
	box-shadow: none;
}

/* ---------------------------------------------------------------------- */
/* Animazione apertura scheda prodotto (impostazione open_animation)      */
/* ---------------------------------------------------------------------- */
@keyframes pcxOpenFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcxOpenZoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes pcxOpenSlide { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

.pcx-open-anim-fade { animation: pcxOpenFade .55s ease both; }
.pcx-open-anim-zoom { animation: pcxOpenZoom .55s cubic-bezier(.2,.8,.2,1) both; }
.pcx-open-anim-slide { animation: pcxOpenSlide .55s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
	.pcx-open-anim-fade, .pcx-open-anim-zoom, .pcx-open-anim-slide { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Prezzo (facoltativo, nascosto automaticamente se non impostato)        */
/* ---------------------------------------------------------------------- */
.pcx-card-meta-price {
	color: #fff !important;
	background: var(--pcx-gradient) !important;
	font-weight: 700;
}
.pcx-single-price {
	display: inline-block;
	font-family: var(--pcx-font-heading);
	font-size: calc(22px * var(--pcx-scale));
	font-weight: 700;
	color: var(--pcx-text);
	margin: -6px 0 20px;
}

/* ---------------------------------------------------------------------- */
/* Barra di traduzione (bandiere) + pulizia widget Google Translate       */
/* ---------------------------------------------------------------------- */
/* Un unico "binario" arrotondato che racchiude tutti i pulsanti (come un
selettore a segmenti): la lingua attiva è un pillola piena col colore
accento, le altre sono solo testo, per essere ben visibile in cima alla
pagina invece di un piccolo gruppo di cerchietti a sé stanti. */
.pcx-translate-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	width: fit-content;
	margin: 0 0 14px auto;
	padding: 4px;
	border-radius: var(--pcx-radius-pill);
	background: var(--pcx-surface);
	border: 1.5px solid var(--pcx-border);
	box-shadow: var(--pcx-shadow-sm);
}
.pcx-translate-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 30px;
	padding: 0 12px;
	border-radius: var(--pcx-radius-pill);
	border: none;
	background: transparent;
	color: var(--pcx-text-soft);
	font-family: var(--pcx-font-heading);
	font-size: calc(13px * var(--pcx-scale));
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.pcx-translate-flag:hover { color: var(--pcx-text); }
.pcx-translate-flag.is-active {
	background: var(--pcx-gradient);
	color: #fff;
	box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--pcx-accent-mid) 55%, transparent);
}

/* Nasconde la UI di default di Google Translate (banner in cima alla pagina,
icona fluttuante): restano visibili solo le bandiere di .pcx-translate-bar. */
.goog-te-banner-frame,
.goog-te-balloon-frame,
.skiptranslate > iframe {
	display: none !important;
}
body {
	top: 0 !important;
}
.pcx-google-translate-hidden {
	display: none !important;
}

/* ---------------------------------------------------------------------- */
/* Product Compare Hub additions                                           */
/* ---------------------------------------------------------------------- */
.pcx-single-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pcx-badge-outline { background: transparent !important; color: var(--pcx-text-soft) !important; border: 1px solid var(--pcx-border); }
.pcx-spec-row-long { grid-column: 1 / -1; }
.pcx-spec-row-long .pcx-spec-value { white-space: normal; line-height: 1.55; }
.pcx-demo-badge {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--pcx-font-heading); font-weight: 700; font-size: calc(12px * var(--pcx-scale));
	letter-spacing: .08em; text-transform: uppercase;
	color: #fff; background: var(--pcx-gradient);
	border-radius: var(--pcx-radius-pill); padding: 6px 14px; margin: 0 0 14px;
}
.pcx-demo-note { color: var(--pcx-text-soft); font-size: calc(13px * var(--pcx-scale)); margin: -6px 0 18px; }

/* ---------------------------------------------------------------------- */
/* Theme-conflict guards: many themes style every <a> (color, underline)  */
/* and every <button>; the plugin's links and buttons keep their own look. */
/* ---------------------------------------------------------------------- */
.pcx-catalog a, .pcx-single a, .pcx-compare-static a, .pcx-modal a, .pcx-compare-bar a { text-decoration: none !important; box-shadow: none !important; }
.pcx-card-title a, .pcx-card-title a:hover, .pcx-card-title a:visited { color: var(--pcx-text) !important; }
.pcx-compare-head, .pcx-compare-head span { color: var(--pcx-text) !important; }
.pcx-btn-primary, .pcx-btn-primary:hover, .pcx-btn-primary:visited { color: #fff !important; }
.pcx-btn-ghost, .pcx-btn-ghost:visited { color: var(--pcx-text) !important; }
.pcx-catalog button, .pcx-single button, .pcx-compare-static button, .pcx-modal button, .pcx-compare-bar button { text-transform: none; letter-spacing: normal; }

/* Fallback page wrapper (archive / single templates): always paints the
   plugin background so a dark theme never shows dark text on dark. */
.pcx-theme-wrap { background: var(--pcx-bg); padding: 28px 0 48px; min-height: 60vh; }

/* Demo badge: self-contained colors (printed outside the themed containers). */
.pcx-demo-badge { background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 55%, #22D3EE 100%); color: #fff; border-radius: 999px; }

/* ---------- Language switcher ---------- */
.pcx-lang-switcher { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; align-items: center; }
.pcx-lang-align-right { justify-content: flex-end; }
.pcx-lang-align-center { justify-content: center; }
.pcx-lang-align-left { justify-content: flex-start; }
.pcx-lang-switcher .pcx-lang-link { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--pcx-border, rgba(127,127,127,.35)); background: var(--pcx-surface, transparent); color: var(--pcx-text, inherit); text-decoration: none !important; font: 600 12px/1 var(--pcx-font-body, inherit); letter-spacing: .02em; opacity: .75; transition: opacity .15s, transform .15s, box-shadow .15s; }
.pcx-lang-switcher .pcx-lang-link:hover { opacity: 1; transform: translateY(-1px); }
.pcx-lang-switcher .pcx-lang-link.is-current { opacity: 1; border-color: var(--pcx-accent-mid, #4F46E5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcx-accent-mid, #4F46E5) 30%, transparent); }
.pcx-lang-switcher .pcx-lang-icon { display: inline-block; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.2); line-height: 0; object-fit: cover; }
.pcx-lang-switcher .pcx-lang-icon svg { display: block; width: 24px; height: 16px; }
.pcx-lang-style-flags .pcx-lang-link { padding: 4px; }
.pcx-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pcx-theme-wrap .pcx-lang-switcher { padding-top: 4px; }

/* ---------- Web app install button ---------- */
.pcx-app-install { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 12px; }
.pcx-app-install-btn { display: inline-flex; align-items: center; gap: 6px; }
.pcx-app-install-hint { font-size: 13px; opacity: .8; }
.pcx-lang-align-right + .pcx-app-install { justify-content: flex-end; }
.pcx-lang-align-center + .pcx-app-install { justify-content: center; }
@media (display-mode: standalone) { .pcx-app-install { display: none; } }


/* Demo: paint the theme background so dark-mode text stays readable,
   and keep the admin button a small visible pill. */
.pcx-catalog,
.pcx-single,
.pcx-compare-static,
.pcx-archive-header,
.pcx-theme-wrap {
	background: var(--pcx-bg);
	color: var(--pcx-text);
}
.pcx-demo-panel {
	background: var(--pcx-bg, #FAFAFD);
	color: var(--pcx-text, #14141F);
	border-radius: 16px;
	padding: 12px 14px;
	margin: 0 0 14px;
}
a.pcx-demo-admin-btn,
.pcx-demo-admin-btn {
	display: inline-flex !important;
	width: auto !important;
	max-width: max-content;
	align-items: center;
	gap: 6px;
	padding: 5px 11px !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 650;
	line-height: 1.2 !important;
	letter-spacing: 0;
	text-decoration: none !important;
	color: #fff !important;
	background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 55%, #22D3EE 100%) !important;
	box-shadow: 0 4px 12px -6px rgba(79, 70, 229, .45) !important;
}
a.pcx-demo-admin-btn:hover,
.pcx-demo-admin-btn:hover { filter: brightness(1.06); color: #fff !important; }