/*
 * Promo dell'app a fine articolo (plugin Mano). Ogni regola parte da
 * .mano-promo e i reset usano !important: il riquadro sta dentro il testo
 * dell'articolo, dove tema ed Elementor danno stili a p, ul, li, a e img.
 */
.mano-promo[hidden],
.mano-promo .mano-promo__v[hidden] { display: none !important; }

.mano-promo {
	--mano-promo-primary: #cc0000;
	--mano-promo-accent: #e32400;
	display: block;
	clear: both;
	/* Solo sopra e sotto: i margini laterali restano al tema, che centra i blocchi nella colonna. */
	margin-top: 28px !important;
	margin-bottom: 28px !important;
	font-family: inherit;
	line-height: 1.35;
	text-align: left;
}
.mano-promo *,
.mano-promo *::before,
.mano-promo *::after { box-sizing: border-box; }
.mano-promo p,
.mano-promo ul,
.mano-promo li { margin: 0 !important; padding: 0 !important; list-style: none !important; background: none; }
.mano-promo li::before { content: none !important; }
.mano-promo a { text-decoration: none !important; box-shadow: none !important; border: 0 !important; }
.mano-promo img { display: block; max-width: none !important; margin: 0 !important; padding: 0 !important; }

.mano-promo .mano-promo__v { position: relative; display: flex; align-items: center; gap: 14px; border-radius: 18px; overflow: hidden; }
.mano-promo--preview .mano-promo__v + .mano-promo__v { margin-top: 20px; }
.mano-promo .mano-promo__body { flex: 1 1 auto; min-width: 0; }
.mano-promo .mano-promo__eyebrow { font-size: 11px !important; font-weight: 700; letter-spacing: .08em; line-height: 1.3 !important; text-transform: uppercase; color: var(--mano-promo-primary) !important; }
.mano-promo .mano-promo__title { margin-top: 4px !important; font-size: 17px !important; font-weight: 800; line-height: 1.25 !important; color: #1a1a1a !important; }
.mano-promo .mano-promo__text { margin-top: 5px !important; font-size: 13.5px !important; line-height: 1.4 !important; color: #555 !important; }
.mano-promo .mano-promo__btn { display: inline-block; margin-top: 11px; padding: 9px 16px; border-radius: 999px; background: var(--mano-promo-primary); color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1.2; }
.mano-promo .mano-promo__btn:hover,
.mano-promo .mano-promo__btn:focus { color: #fff !important; filter: brightness(1.08); }
.mano-promo .mano-promo__shot { flex: 0 0 auto; width: 74px !important; height: 134px !important; object-fit: cover; object-position: top; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .18) !important; }

/* A · un servizio alla volta */
.mano-promo .mano-promo__v--a { padding: 14px; border: 1px solid #f2d2cf; border-color: color-mix(in srgb, var(--mano-promo-primary) 18%, #fff); background: #fff7f6; background: color-mix(in srgb, var(--mano-promo-primary) 4%, #fff); }

/* B · tutti i servizi */
.mano-promo .mano-promo__v--b { display: block; border: 1px solid #eee; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.mano-promo .mano-promo__head { padding: 14px 16px; background: linear-gradient(135deg, var(--mano-promo-primary), var(--mano-promo-accent)); }
.mano-promo .mano-promo__v--b .mano-promo__eyebrow { color: rgba(255, 255, 255, .85) !important; }
.mano-promo .mano-promo__v--b .mano-promo__title { color: #fff !important; }
.mano-promo .mano-promo__main { padding: 14px 16px 16px; }
.mano-promo .mano-promo__list { display: grid; gap: 9px; }
.mano-promo .mano-promo__list li { display: grid; grid-template-columns: 24px 1fr; align-items: start; font-size: 14px !important; line-height: 1.35 !important; color: #1a1a1a !important; }
.mano-promo .mano-promo__v--b .mano-promo__btn { display: block; margin-top: 14px; text-align: center; }

/* C · frase sull'articolo e servizi in breve */
.mano-promo .mano-promo__v--c { padding: 16px 0 16px 16px; background: #0a0a0a; }
.mano-promo .mano-promo__v--c .mano-promo__eyebrow { color: #ff6b5b !important; }
.mano-promo .mano-promo__v--c .mano-promo__title { color: #fff !important; }
.mano-promo .mano-promo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.mano-promo .mano-promo__chips li { padding: 4px 10px !important; border-radius: 999px; background: #222; color: #fff !important; font-size: 12px !important; line-height: 1.3 !important; }
.mano-promo .mano-promo__shot--tilt { width: 86px !important; height: 176px !important; margin-right: -14px !important; border: 3px solid #333 !important; border-radius: 14px !important; box-shadow: none !important; transform: rotate(6deg); }

/* Computer: codice QR e badge al posto del pulsante */
.mano-promo .mano-promo__desk { display: none; flex: 0 0 auto; width: 172px; padding: 10px 11px; border-radius: 14px; background: #fff; text-align: center; }
.mano-promo .mano-promo__v--a .mano-promo__desk,
.mano-promo .mano-promo__v--b .mano-promo__desk { border: 1px solid #eee; }
.mano-promo[data-platform="desktop"] .mano-promo__desk { display: block; }
.mano-promo[data-platform="desktop"] .mano-promo__btn { display: none; }
.mano-promo .mano-promo__qr { width: 104px; height: 104px; margin: 0 auto; }
.mano-promo .mano-promo__qr svg { display: block; width: 100%; height: 100%; }
.mano-promo .mano-promo__qrlabel { margin: 6px 0 4px !important; font-size: 12px !important; font-weight: 700; line-height: 1.3 !important; color: #1a1a1a !important; }
.mano-promo .mano-promo__badge { display: block; margin-top: 6px; }
.mano-promo .mano-promo__badge img { width: auto !important; height: 40px !important; margin: 0 auto !important; }
.mano-promo .mano-promo__badge[data-store="android"] img { height: 58px !important; margin: -9px auto !important; }

.mano-promo[data-platform="desktop"] .mano-promo__v { gap: 18px; }
.mano-promo[data-platform="desktop"] .mano-promo__title { font-size: 21px !important; }
.mano-promo[data-platform="desktop"] .mano-promo__text { font-size: 14px !important; }
.mano-promo[data-platform="desktop"] .mano-promo__shot { width: 86px !important; height: 156px !important; }
.mano-promo[data-platform="desktop"] .mano-promo__shot--tilt { width: 92px !important; height: 186px !important; margin-right: 0 !important; }
.mano-promo[data-platform="desktop"] .mano-promo__v--a { padding: 16px 18px; }
.mano-promo[data-platform="desktop"] .mano-promo__v--c { padding: 18px 18px 18px 22px; }
.mano-promo[data-platform="desktop"] .mano-promo__head { padding: 14px 20px; }
.mano-promo[data-platform="desktop"] .mano-promo__main { display: flex; align-items: center; gap: 18px; padding: 16px 20px; }
.mano-promo[data-platform="desktop"] .mano-promo__list { flex: 1 1 auto; grid-template-columns: 1fr 1fr; column-gap: 14px; }