/* CSS SOLO per il checkout (/crea-nuovo-account, content/registazione_carta.php).
   Caricato nel body, quindi dopo Bootstrap e dopo il CSS del tema. */

/* titolo del box: e' un h1 vero e tiene font/colore del vecchio div.subscription-name;
   grandezza, interlinea e margini li decide .co-intro-h1 qui sotto */
h1.co-title { font-weight: 600; color: #333; padding: 0; text-transform: none; letter-spacing: 0; }

/* header fisso (.main-nav.stick-fixed = 75px) + 24px: solo sotto i 988px, dove la pagina e' a colonna unica.
   Sopra resta il padding-top inline di 65px che c'era gia'. */
@media (max-width: 987px) {
  .co-has-header { padding-top: 99px !important; }
}

/* blocco titolo con ritratto. Il selettore dell'immagine e' img.co-intro-img (non .co-intro-img) perche' il tema ha
   img:not([draggable]){height:auto} con specificita' (0,1,1): a parita', vince questa che viene dopo. Nessuna regola in piu'. */
.co-intro{display:flex;align-items:center;gap:16px;margin:0 0 20px}
@media(min-width:988px){ .co-intro-desktop{margin:30px 0 4px} }   /* desktop: allineato all'alto della card a destra */
img.co-intro-img{flex:0 0 64px;width:64px;height:64px;border-radius:50%;
  object-fit:cover;object-position:center 30%;
  box-shadow:0 2px 10px rgba(0,0,0,.10)}
.co-intro-txt{min-width:0}
.co-intro-h1{margin:0 0 4px;font-size:24px;line-height:1.2}
.co-intro-sub{margin:0;font-size:14px;opacity:.7}
@media(min-width:768px){
  img.co-intro-img{flex-basis:88px;width:88px;height:88px}
  .co-intro-h1{font-size:32px}
}

/* il blocco titolo sopra il form esiste solo su desktop: sotto i 988px e' dentro la card mobile.
   Sta in fondo e con doppia classe perche' deve battere .co-intro{display:flex} qui sopra. */
@media (max-width: 987px) {
  .co-intro.co-intro-desktop { display: none !important; }
}