/*
  IL RIQUADRO DI ACCESSO DEL CHECKOUT.

  Com'era: tre pulsantoni separati per Login / Ospite / Registrati, due
  caselle azzurre alte 42 pixel, un "Ha dimenticato la password"
  appiccicato a destra, un pulsantino "Login" perso in mezzo, un cerchio
  con la "O", un titolo "Accedi con" e infine un pulsante Google ROSSO.
  Sei blocchi scollegati, alti in tutto piu' di quattrocento pixel, prima
  ancora di aver scritto l'indirizzo.

  Com'e': una barra sola per la scelta, due caselle attaccate, il
  pulsante largo quanto loro, una riga sottile con "oppure" e il pulsante
  Google come lo vuole Google. Stessa larghezza per tutto, un solo ritmo
  verticale.

  ⚠️ SU COMPUTER IL NEGOZIO E' DISEGNATO ALL'80% (theme.css: body { zoom:
  0.8 } sopra i 1024 pixel). Le misure qui sotto sono quelle CSS, quindi
  a schermo si vedono piu' piccole di cosi': per questo i 40 pixel dei
  pulsanti sono 42, e i caratteri 15 invece di 14.

  ⚠️ IL TEMA COMBATTE CON REGOLE CHE COMINCIANO PER ID
  (#supercheckout-option ...), e fra due dichiarazioni entrambe
  importanti vince il selettore piu' pesante, non l'ultima scritta:
  percio' anche qui si parte dagli id.
*/

/* ------------------------------------------------------------------ */
/*  0. Un po' d'aria in fondo                                          */
/* ------------------------------------------------------------------ */
/*
  Stringendo il riquadro, l'ultimo pezzo - il pulsante Google, o la
  casella dell'ospite - finiva appoggiato alla barra grigia della
  sezione dopo ("INDIRIZZO DI CONSEGNA"), senza un filo di stacco: due
  cose diverse che sembravano una sola.

  Lo spazio si mette QUI, sul corpo della sezione, e non sotto il
  pulsante Google: nella linguetta "Ospite" quel pulsante non c'e' e lo
  stacco sparirebbe proprio dove la barra dopo arriva piu' vicina.

  ⚠️ E VALE 14, NON 22. A 22 il riquadro tornava a sembrare largo di
  fianchi: uno spazio in fondo piu' grande di tutti gli altri si nota
  come un buco, non come respiro. 14 e' la stessa misura che separa la
  barra delle linguette dalle caselle, cioe' il passo che il riquadro
  tiene gia' al suo interno: l'occhio lo legge come parte del ritmo e
  non come un'aggiunta.
*/
#checkoutLogin.section-body {
    padding-bottom: 14px !important;
}

/* ------------------------------------------------------------------ */
/*  1. La scelta: Login / Ospite / Registrati                          */
/* ------------------------------------------------------------------ */

/*
  ⚠️ UNA COLONNA SOLA, LARGA UGUALE DA CIMA A FONDO. La barra della
  scelta occupava tutti i 1110 pixel della sezione mentre il modulo
  sotto ne teneva 460, e il pulsante Google era piu' largo di quello di
  accesso perche' il secondo stava dentro un riquadro con 20 pixel di
  imbottitura. Tre larghezze diverse in venti centimetri di pagina: e'
  quello che faceva sembrare tutto sparpagliato. Ora la misura e' una.
*/
#checkoutLogin #supercheckout-option.login-options,
#checkoutLogin .login-form,
#checkoutLogin #supercheckout-new-customer-form.register-section,
#checkoutLogin #social_login_block {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
  ⚠️ LA CASELLA DELLA REGISTRAZIONE STA IN UN'ALTRA CASA. Scegliendo
  "Registrati", la password non e' quella del riquadro di accesso: nasce
  dentro una TABELLA a parte (#supercheckout-new-customer-form), larga
  quanto tutta la sezione. Restava buttata a sinistra, fuori dalla
  colonna, e da sola bastava a far sembrare storto tutto il resto. Va
  riportata in riga con le altre - tabella, riga e cella comprese,
  perche' una tabella non si stringe se non si stringono anche loro.
*/
/*
  ⚠️⚠️ E QUI NON SI TOCCA `display`. Il primo tentativo scriveva
  `display: block !important` su tabella, righe e celle per stringerle:
  ma supercheckout nasconde le righe della registrazione proprio con
  `display: none` sul `tr`, e la mia riga importante glielo scavalcava -
  scegliendo "Ospite" compariva una casella della password che non
  c'entrava niente. Visto in pagina, non dedotto. Per stare in colonna
  bastano la larghezza e l'imbottitura.
*/
#checkoutLogin #supercheckout-new-customer-form.register-section {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

#checkoutLogin #supercheckout-new-customer-form.register-section table.supercheckout-form {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
}

/* ⚠️ Il freno stava nel `tbody`, non nella riga: finche' resta un
   gruppo di righe di tabella la larghezza gliela decide il calcolo
   automatico della tabella (208 pixel), e il 100% delle righe e' il
   100% DI QUEI 208. Il `tbody` si puo' rendere un blocco senza
   pericolo: a nascondere le righe della registrazione e' il `display`
   del `tr`, che qui non si tocca. */
#checkoutLogin #supercheckout-new-customer-form.register-section tbody {
    display: block !important;
    width: 100% !important;
}

/* La riga e' gia' un blocco per conto suo (lo fa supercheckout), ma
   larga 208 pixel invece che quanto la tabella: si allarga senza
   toccarne il `display`, che e' quello che nasconde le righe. */
#checkoutLogin #supercheckout-new-customer-form.register-section tr,
#checkoutLogin #supercheckout-new-customer-form.register-section td {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
}

#checkoutLogin #supercheckout-new-customer-form.register-section .form-group {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#checkoutLogin #supercheckout-new-customer-form.register-section input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #222 !important;
    font-size: 15px !important;
}

#checkoutLogin #supercheckout-new-customer-form.register-section input:focus {
    border-color: #f5a623 !important;
    box-shadow: 0 0 0 2px rgba(245, 166, 35, .18) !important;
}

/* Il riquadro bianco attorno alle caselle spariva: era lui a stringere
   il pulsante di accesso rispetto a quello di Google. */
#checkoutLogin .login-form {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
}

/*
  ⚠️ I CONTORNI DELLA BARRA. Aveva un bordo grigio da 1 pixel attorno a
  un fondo quasi bianco: il bordo faceva il lavoro che tocca al fondo, e
  il risultato era una scatola dura in mezzo a caselle morbide. Via il
  bordo, e il fondo si scurisce quel tanto che basta a farsi vedere da
  solo.

  ⚠️ E I RAGGI DEVONO INCASTRARSI: raggio esterno 8 meno 3 di imbottitura
  fa 5, non 6. Con 6 la linguetta accesa spingeva contro l'angolo del
  contenitore e restava una mezzaluna chiara - il difetto che si vede
  ingrandendo e che da lontano fa solo sembrare storto.
*/
#checkoutLogin #supercheckout-option.login-options {
    display: flex !important;
    margin: 0 auto 14px !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f0f0f0 !important;
    gap: 3px !important;
}

#checkoutLogin #supercheckout-option.login-options .radio-inline {
    flex: 1 1 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* La casella vera resta raggiungibile da tastiera, ma non si vede:
   quello che si clicca e' l'etichetta. */
#checkoutLogin #supercheckout-option.login-options .radio-inline input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

#checkoutLogin #supercheckout-option.login-options .radio-inline label {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 4px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #6b6b6b !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
}

#checkoutLogin #supercheckout-option.login-options .radio-inline label:hover {
    color: #222 !important;
}

/* L'acceso. supercheckout marca la scelta sul contenitore in modi
   diversi a seconda del momento: si guardano tutti e tre. */
#checkoutLogin #supercheckout-option.login-options .radio-inline input:checked + label,
#checkoutLogin #supercheckout-option.login-options .radio-inline.active label,
#checkoutLogin #supercheckout-option.login-options .radio-inline.checked label {
    background: #f5a623 !important;
    color: #fff !important;
    /* un'ombra appena accennata: deve dire "questa e' sollevata", non
       disegnare un secondo bordo scuro */
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12) !important;
}

/* ------------------------------------------------------------------ */
/*  2. Le caselle                                                      */
/* ------------------------------------------------------------------ */

#checkoutLogin .login-form .form-group,
#checkoutLogin .login-form .supercheckout-extra-wrap {
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#checkoutLogin .login-form input#email,
#checkoutLogin .login-form input#password {
    width: 100% !important;
    height: 42px !important;
    margin: 0 0 8px !important;
    padding: 0 12px !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #222 !important;
    font-size: 15px !important;
}

/*
  ⚠️ L'INDIRIZZO SALVATO DAL BROWSER SI TINGE DI AZZURRO. Chrome dipinge
  di suo le caselle che ha riempito (#e8f0fe), e in mezzo a due caselle
  bianche si vedeva. Il riempimento si copre con un'ombra interna, che e'
  l'unico modo: lo sfondo vero Chrome non lo lascia cambiare.
*/
#checkoutLogin .login-form input#email:-webkit-autofill,
#checkoutLogin .login-form input#password:-webkit-autofill,
#checkoutLogin .login-form input#email:-webkit-autofill:focus,
#checkoutLogin .login-form input#password:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #222 !important;
}

#checkoutLogin .login-form input#email:focus,
#checkoutLogin .login-form input#password:focus {
    border-color: #f5a623 !important;
    box-shadow: 0 0 0 2px rgba(245, 166, 35, .18) !important;
}

/*
  ⚠️⚠️ LA CORSIA RISERVATA SOTTO LE CASELLE.

  L'errore "L'email non e' valida" supercheckout lo appende DENTRO la
  cella dell'e-mail (supercheckout.js: lo attacca al genitore del campo).
  Quella cella cresce di una riga, cresce la riga della griglia, e il
  collegamento e il pulsante Login scendono - mentre la colonna di destra
  resta ferma. Le due meta' si sfasano proprio quando il cliente ha
  sbagliato qualcosa, cioe' nel momento peggiore.

  Il rimedio non e' spostare l'errore: e' tenergli il posto sempre. Sotto
  ogni casella corrono 20 pixel di corsia, che ci sia un messaggio o no.

  Il conto dei 93: 23 di etichetta + 42 di casella + 8 di margine + 20 di
  corsia.

  ⚠️ min-height e NON height: un messaggio che va a capo deve allungare
  la corsia, non farsi tagliare. Un errore illeggibile e' peggio di un
  riquadro un po' piu' alto.
*/
/*
  ⚠️ IL SELETTORE E' PESANTE APPOSTA. Un nostro altro modulo -
  sdcheckoutflow, che disegna il checkout a sezioni - mette
  `margin: 0 0 14px !important` sulla stessa cella con un selettore di
  pari peso, e vince perche' il suo foglio arriva dopo. Fra due
  dichiarazioni entrambe importanti conta il selettore piu' pesante, non
  l'ultima scritta: qui si aggiunge la seconda classe della cella e la
  questione e' chiusa. Quei 14 pixel facevano la riga alta 107 invece di
  93, e la colonna di destra restava piu' in alto di quella di sinistra.
*/
#checkoutLogin .login-form > .form-group.supercheckout-extra-wrap,
#checkoutLogin .login-form > .supercheckout-extra-wrap,
#checkoutLogin #supercheckout-login-password-box {
    min-height: 93px;
    /* ⚠️ IL MARGINE DELLA CELLA FA ALTEZZA NELLA GRIGLIA. La cella
       dell'e-mail si portava dietro 14 pixel di margine sotto: la riga
       diventava 107 invece di 93, e la colonna di destra - che i 93 li ha
       per regola - restava piu' in alto di quella di sinistra. Fuori
       dalla griglia non si vedeva, perche' i margini di due blocchi in
       fila si fondono; qui no. */
    margin-bottom: 0 !important;
}

#checkoutLogin .login-form span.errorsmall {
    display: block !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 20px !important;
    text-align: left !important;
}

/*
  ⚠️ LA CASELLA SBAGLIATA SI TINGE. supercheckout la classe `error-form`
  ce la mette gia', ma nel riquadro di accesso non disegna niente: e'
  vestita solo dentro il blocco degli indirizzi. Cosi' l'unico segnale
  era una riga di testo piccolo sotto una di due caselle identiche.

  Il rosso e' quello che il negozio usa gia' per gli errori, letto dalla
  pagina: non se ne introduce un secondo.
*/
/*
  ⚠️ E IL SELETTORE DEVE PESARE PIU' DI QUELLO DEL BORDO NORMALE, che
  nomina il campo per id (input#email): `input.error-form` da solo
  perdeva, ed erano entrambi importanti. Si nominano per id anche qui.
*/
#checkoutLogin .login-form input#email.error-form,
#checkoutLogin .login-form input#password.error-form,
#checkoutLogin .login-form input.error-form {
    border-color: #ff0000 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------------ */
/*  3. "Ha dimenticato la password" e il pulsante                      */
/* ------------------------------------------------------------------ */

/*
  Sul telefono le collocazioni nella griglia non valgono e il
  collegamento resta dove lo stampa supercheckout, sotto la password. La
  corsia pero' vale anche li': l'errore fa lo stesso danno - sposta il
  pulsante mentre il dito e' gia' in viaggio - e un tocco sbagliato sul
  telefono costa piu' che altrove.
*/
#checkoutLogin #forgotpasswordlink {
    margin: 0 0 14px !important;
    text-align: right !important;
    line-height: 20px !important;
}

#checkoutLogin #forgotpasswordlink a.label-link {
    float: none !important;
    display: inline-block !important;
    padding: 0 !important;
    color: #8a8a8a !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

#checkoutLogin #forgotpasswordlink a.label-link:hover {
    color: #f5a623 !important;
    text-decoration: underline !important;
}

#checkoutLogin p.loginBtn {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

#checkoutLogin p.loginBtn input#button-login {
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #f5a623 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    cursor: pointer !important;
}

#checkoutLogin p.loginBtn input#button-login:hover {
    background: #e0951a !important;
}

/* ------------------------------------------------------------------ */
/*  4. Il divisorio: da cerchio + titolo a una riga sola               */
/* ------------------------------------------------------------------ */

#checkoutLogin #social_login_block {
    padding: 0 !important;
}

#checkoutLogin #social_login_block .social-login {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

/* Il cerchio con la "O" e il titolo "Accedi con" facevano ottanta pixel
   in due per dire una parola sola. Restano invisibili, e al loro posto
   c'e' la riga qui sotto, disegnata sul contenitore. */
#checkoutLogin #social_login_block .social-head,
#checkoutLogin #social_login_block .social-login > h4 {
    display: none !important;
}

#checkoutLogin #social_login_block .sigInButtons {
    position: relative !important;
    margin: 0 !important;
    /* 22 e non 26: la riga con "oppure" era il gradino piu' alto del
       riquadro e spezzava il passo. */
    padding: 22px 0 0 !important;
    text-align: center !important;
}

#checkoutLogin #social_login_block .sigInButtons::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    right: 0;
    border-top: 1px solid #e6e6e6;
}

/*
  La parola dentro la riga. Le lingue si scelgono dall'attributo lang
  della pagina, come fa gia' il configuratore: nessun JavaScript, e
  quindi niente che possa non partire. L'italiano e' anche la riserva
  per una lingua che non fosse prevista.
*/
#checkoutLogin #social_login_block .sigInButtons::after {
    content: "OPPURE";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 12px;
    background: #fff;
    color: #9a9a9a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 22px;
}

html[lang="en"] #checkoutLogin #social_login_block .sigInButtons::after { content: "OR"; }
html[lang="fr"] #checkoutLogin #social_login_block .sigInButtons::after { content: "OU"; }
html[lang="de"] #checkoutLogin #social_login_block .sigInButtons::after { content: "ODER"; }
html[lang="es"] #checkoutLogin #social_login_block .sigInButtons::after { content: "O BIEN"; }

/* ------------------------------------------------------------------ */
/*  5. Il pulsante Google                                              */
/* ------------------------------------------------------------------ */
/*
  ⚠️ ERA ROSSO, con la "G" di Font Awesome: e' il vecchio stile
  Google+, sparito nel 2019. Le regole di Google per il pulsante di
  accesso chiedono fondo bianco, bordo #dadce0, testo #3c4043 e la G a
  quattro colori. Un pulsante rosso col nome Google, oggi, somiglia piu'
  a una truffa che a un accesso.

  La G e' un'immagine SVG scritta dentro il foglio: nessun file da
  scaricare, nessuna richiesta in piu', e non si puo' rompere.
*/

#checkoutLogin #social_login_block .sigInButtons a.googleButton,
#checkoutLogin #social_login_block .sigInButtons a.azm-google-plus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #dadce0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #3c4043 !important;
    /*
      ⚠️ LA SCRITTA DEL PULSANTE DICEVA SOLO "Google", in tutte e cinque
      le lingue: e' un testo fisso dentro il template del modulo di
      altri, e riscriverlo vorrebbe dire modificare un file loro - cosa
      che qui non si fa se si puo' evitare. Il testo originale si
      rimpicciolisce a zero e la frase intera arriva qui sotto, per
      lingua. Cambia solo cio' che si vede: il collegamento, il suo
      indirizzo e il suo funzionamento restano quelli del modulo.
    */
    font-size: 0 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: background .15s, border-color .15s, box-shadow .15s !important;
}

#checkoutLogin #social_login_block .sigInButtons a.googleButton::after {
    content: "Accedi con Google";
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

html[lang="en"] #checkoutLogin #social_login_block .sigInButtons a.googleButton::after { content: "Sign in with Google"; }
html[lang="fr"] #checkoutLogin #social_login_block .sigInButtons a.googleButton::after { content: "Continuer avec Google"; }
html[lang="de"] #checkoutLogin #social_login_block .sigInButtons a.googleButton::after { content: "Mit Google anmelden"; }
html[lang="es"] #checkoutLogin #social_login_block .sigInButtons a.googleButton::after { content: "Acceder con Google"; }

#checkoutLogin #social_login_block .sigInButtons a.googleButton:hover {
    background: #f7f8f8 !important;
    border-color: #d2d3d5 !important;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .12) !important;
}

/* La "G" al posto dell'icona del carattere. */
#checkoutLogin #social_login_block .sigInButtons a.googleButton i.fab,
#checkoutLogin #social_login_block .sigInButtons a.googleButton i.fa-google {
    display: inline-block !important;
    width: 19px !important;
    height: 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#checkoutLogin #social_login_block .sigInButtons a.googleButton i.fab::before,
#checkoutLogin #social_login_block .sigInButtons a.googleButton i.fa-google::before {
    content: "" !important;
}

/* ------------------------------------------------------------------ */
/*  6. Il telefono                                                     */
/* ------------------------------------------------------------------ */

@media (max-width: 575px) {
    #checkoutLogin #supercheckout-option.login-options .radio-inline label {
        padding: 9px 2px !important;
        font-size: 14px !important;
    }

    #checkoutLogin .login-form,
    #checkoutLogin #social_login_block {
        max-width: none;
    }
}

/* ================================================================== */
/*  7. SU COMPUTER: DUE COLONNE                                        */
/* ================================================================== */
/*
  A sinistra il modulo di sempre - linguette, le due caselle affiancate,
  il pulsante largo quanto loro. A destra l'accesso con Google, con il
  suo titolo e una riga che dice cosa NON facciamo con i dati. In mezzo
  una linea sottile con "OPPURE" scritto per il lungo.

  ⚠️ VALE SOLO PER LA LINGUETTA "LOGIN". Le altre due - Ospite e
  Registrati - non hanno il pulsante Google accanto, quindi la seconda
  colonna sarebbe vuota: li' resta la colonna sola. A dire quale
  linguetta e' scelta e' una classe che mettiamo noi (sdaccesso.js),
  perche' quelle di supercheckout non cambiano - misurato: identiche
  tutte e tre le volte.

  ⚠️ E SOLO SOPRA I 992 PIXEL. Sul telefono due colonne da 400 pixel non
  ci stanno, e il riquadro compatto a colonna sola va gia' bene: sotto
  quella misura non cambia niente di quello che c'e' sopra.
*/

@media (min-width: 992px) {

    #checkoutLogin.sd-acc-login {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 380px);
        column-gap: 30px;
        align-items: start;
    }

    /* la colonna unica da 460 vale per il telefono e per le altre due
       linguette: qui ogni pezzo riempie la sua cella */
    #checkoutLogin.sd-acc-login #supercheckout-option.login-options,
    #checkoutLogin.sd-acc-login .login-form,
    #checkoutLogin.sd-acc-login #social_login_block {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*
      ⚠️⚠️ LA BARRA DELLE LINGUETTE NON SI MUOVE MAI. Prima stava nella
      colonna di sinistra, quindi passando da "Login" alle altre due -
      dove le colonne sono una sola e la barra e' centrata - saltava di
      lato. Il cliente vede spostarsi proprio la cosa che sta per
      cliccare.

      Ora la barra prende TUTTA la larghezza della griglia e si centra da
      se', con la stessa misura che ha nelle altre due linguette (460):
      cosi' resta ferma nello stesso punto e cambia solo cio' che sta
      sotto.
    */
    #checkoutLogin.sd-acc-login #supercheckout-option.login-options {
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: 460px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #checkoutLogin.sd-acc-login .login-form {
        grid-column: 1;
        grid-row: 2;
    }

    #checkoutLogin.sd-acc-login #social_login_block {
        grid-column: 3;
        grid-row: 2;
        padding-top: 0 !important;
    }

    /* ⚠️ La colonna di destra va allineata a SINISTRA, come il modulo
       accanto: il centrato arriva da .social-login di supercheckout, ed
       era giusto finche' il pulsante stava da solo sotto a tutto. In
       colonna, due testi centrati di fianco a un modulo allineato a
       sinistra si leggono come un disallineamento. */
    #checkoutLogin.sd-acc-login #social_login_block .social-login,
    #checkoutLogin.sd-acc-login #social_login_block .sigInButtons {
        text-align: left !important;
    }

    /*
      ⚠️ LA COLONNA DESTRA SEGUE LO STESSO SCHELETRO, e non e' un
      abbellimento: alzando il pulsante Login di una riga, senza questo le
      due colonne si sfaserebbero di nuovo - il difetto di prima al
      contrario, e stavolta creato da noi. Con 93 + 16 i due modi di
      entrare finiscono sulla stessa linea, che e' il senso del riquadro.

      I tre figli ci sono gia' e nell'ordine giusto: il titolo, il
      pulsante, la nota. Li mette sdaccesso.js.
    */
    #checkoutLogin.sd-acc-login #social_login_block .social-login {
        display: grid;
        grid-template-rows: 93px auto;
        row-gap: 16px;
    }

    #checkoutLogin.sd-acc-login #social_login_block .sd-acc-dx-testa {
        align-self: start;
        margin: 0 !important;
    }

    /* la riga verticale in mezzo */
    #checkoutLogin.sd-acc-login::before {
        content: "";
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
        width: 1px;
        height: 100%;
        background: #e6e6e6;
    }

    /*
      "OPPURE" per il lungo, appoggiata sopra la riga. Sta nella stessa
      cella della riga - due elementi finti nella stessa cella si
      sovrappongono, ed e' quello che serve - con lo sfondo bianco che
      interrompe la linea.

      writing-mode piu' la rotazione danno la lettura dal basso verso
      l'alto, come nel disegno.
    */
    #checkoutLogin.sd-acc-login::after {
        content: "OPPURE";
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
        align-self: center;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        padding: 10px 0;
        background: #fff;
        color: #9a9a9a;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .12em;
    }

    html[lang="en"] #checkoutLogin.sd-acc-login::after { content: "OR"; }
    html[lang="fr"] #checkoutLogin.sd-acc-login::after { content: "OU"; }
    html[lang="de"] #checkoutLogin.sd-acc-login::after { content: "ODER"; }
    html[lang="es"] #checkoutLogin.sd-acc-login::after { content: "O BIEN"; }

    /* quella orizzontale, che serviva a colonna sola, qui non serve piu' */
    #checkoutLogin.sd-acc-login #social_login_block .sigInButtons {
        padding-top: 0 !important;
    }

    #checkoutLogin.sd-acc-login #social_login_block .sigInButtons::before,
    #checkoutLogin.sd-acc-login #social_login_block .sigInButtons::after {
        display: none !important;
    }

    /* ---------------------------------------------------------------- */
    /*  Le due caselle affiancate                                        */
    /* ---------------------------------------------------------------- */
    /*
      ⚠️ `display: contents` SUL RIQUADRO DELLA PASSWORD, e non su altro.
      Password, "ha dimenticato" e pulsante stanno dentro un contenitore
      loro (#supercheckout-login-box): senza scioglierlo finirebbero
      tutti e tre nella meta' destra, mentre il pulsante deve essere
      largo quanto le due caselle. `contents` fa sparire la scatola e
      lascia i figli, senza spostare un solo nodo.

      Sta dentro alla regola della linguetta "Login": quel contenitore e'
      anche quello che supercheckout NASCONDE nelle altre linguette, e
      scavalcarne il display fuori di qui farebbe ricomparire la casella
      della password dove non c'entra - e' gia' successo.
    */
    #checkoutLogin.sd-acc-login .login-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 16px;
        max-width: 620px !important;
    }

    #checkoutLogin.sd-acc-login #supercheckout-login-box {
        display: contents !important;
    }

    #checkoutLogin.sd-acc-login .login-form > .supercheckout-extra-wrap {
        grid-column: 1;
        grid-row: 1;
    }

    #checkoutLogin.sd-acc-login #supercheckout-login-password-box {
        grid-column: 2;
        grid-row: 1;
    }

    /*
      ⚠️ "HA DIMENTICATO LA PASSWORD" SCENDE NELLA CORSIA DELLA PASSWORD.
      Si prendeva una riga tutta sua, larga quanto le due colonne, per
      130 pixel di testo: fra il fondo delle caselle e il pulsante
      restavano 62 pixel a schermo quasi vuoti. Nella corsia riempie la
      meta' che stava vuota - a sinistra il messaggio d'errore, a destra
      il collegamento - e il pulsante sale di una riga.

      Nessun nodo viene spostato: e' solo collocazione nella griglia. Il
      collegamento sta DOPO nel documento e con z-index resta sopra la
      scatola della password, quindi cliccabile.
    */
    #checkoutLogin.sd-acc-login #forgotpasswordlink {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        justify-self: end;
        position: relative;
        z-index: 1;
        margin: 0 !important;
        line-height: 20px !important;
    }

    #checkoutLogin.sd-acc-login p.loginBtn {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* l'input nascosto che supercheckout tiene li' dentro non deve
       prendersi una riga della griglia */
    #checkoutLogin.sd-acc-login .login-form > input[type="hidden"],
    #checkoutLogin.sd-acc-login .login-form > input[hidden] {
        display: none !important;
    }
}

/* ================================================================== */
/*  8. Le etichette, il segnaposto, il "mostra"                        */
/* ================================================================== */
/*
  Queste valgono anche sul telefono: un'etichetta sopra la casella serve
  ovunque, e senza di lei il cliente vede due rettangoli uguali.
*/

#checkoutLogin .sd-acc-eti {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #3c4043 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

/*
  ⚠️⚠️ IL MOSTRA NON SI MISURA PIU', SI COLLOCA.

  Prima la posizione la leggeva il JavaScript dal campo (offsetTop e
  offsetHeight) - e la leggeva durante un ridisegno, quando il riquadro
  non ha ancora la sua forma: ne usciva un pulsante che cominciava a
  meta' della casella e finiva 18 pixel sotto il suo fondo. Ogni ristampa
  era un'altra occasione di sbagliare misura.

  Qui non c'e' piu' niente da misurare: il contenitore diventa una
  griglia e il pulsante e' una cella nella stessa riga della casella. Due
  elementi nella stessa cella si sovrappongono, ed e' esattamente quello
  che serve.

  ⚠️ `align-content: start` non e' un ornamento: senza, le righe si
  stirano dentro i 93 pixel della corsia e il pulsante torna a stare dove
  non deve.
*/
#checkoutLogin .sd-acc-conmostra {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-content: start !important;
}

#checkoutLogin .sd-acc-conmostra > .sd-acc-eti {
    grid-column: 1 / -1;
    grid-row: 1;
}

#checkoutLogin .sd-acc-conmostra > input {
    grid-column: 1 / -1;
    grid-row: 2;
}

#checkoutLogin .sd-acc-conmostra > span.errorsmall {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* ⚠️ NIENTE `bottom` NE' `height` QUI: li mette sdaccesso.js leggendo
   il campo, perche' il contenitore contiene anche l'etichetta e la sua
   altezza cambia se il testo va a capo. Con misure fisse il pulsante
   sporgeva di 18 pixel sotto la casella. */
/*
  ⚠️⚠️ IL PULSANTE APRIVA IL BORDO DEL CAMPO. Era alto quanto la casella
  (42) e con lo sfondo BIANCO: nella sua larghezza copriva la riga di
  bordo sopra e quella sotto, e il rettangolo si spalancava a destra -
  la casella non sembrava piu' una casella.

  Due cose lo sistemano, e nessuna delle due e' un ritocco di gusto:
   - lo sfondo diventa trasparente, cosi' non copre niente per
     definizione;
   - l'altezza scende a 40 con un pixel di margine sopra, cioe' esattamente
     lo spazio DENTRO i due bordi da un pixel: anche se un giorno tornasse
     opaco, i bordi resterebbero scoperti.

  E un filo verticale a sinistra lo lega alla casella: senza, un testo
  grigio sospeso nel bianco non si capisce se e' un pulsante o
  un'etichetta. Con la riga, si legge come la parte destra del campo.
*/
#checkoutLogin .sd-acc-conmostra > .sd-acc-mostra {
    position: static !important;
    grid-column: 2;
    grid-row: 2;
    justify-self: end !important;
    align-self: start !important;
    height: 40px !important;
    margin: 1px 1px 0 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-left: 1px solid #e6e6e6 !important;
    border-radius: 0 5px 5px 0 !important;
    background: transparent !important;
    color: #8a8a8a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    cursor: pointer !important;
}

#checkoutLogin .sd-acc-conmostra > .sd-acc-mostra:hover {
    color: #f5a623 !important;
}

/* la scritta non deve finire sotto il pulsante */
/* la scritta non deve finire sotto il pulsante, e NASCONDI e
   VERBERGEN sono piu' lunghi di MOSTRA */
#checkoutLogin .sd-acc-conmostra > input {
    padding-right: 100px !important;
}

/* ================================================================== */
/*  9. La colonna dell'accesso rapido                                  */
/* ================================================================== */

#checkoutLogin .sd-acc-dx-testa {
    margin: 0 0 14px;
}

#checkoutLogin .sd-acc-dx-titolo {
    color: #222;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

#checkoutLogin .sd-acc-dx-sotto {
    margin-top: 4px;
    color: #6b6b6b;
    font-size: 14px;
    line-height: 1.35;
}

/* a colonna sola la nota starebbe larga quanto la pagina: si tiene in
   riga con il pulsante */
@media (max-width: 991px) {
    #checkoutLogin .sd-acc-dx-testa {
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }

    #checkoutLogin .sd-acc-dx-testa {
        text-align: center;
        margin-top: 14px;
    }
}

/* ================================================================== */
/*  10. Anche "Registrati" va su due colonne                           */
/* ================================================================== */
/*
  ⚠️ IL PULSANTE GOOGLE IN "REGISTRATI" CI DEVE STARE, ed e' anzi la
  linguetta dove serve di piu': li' c'e' chi un account non ce l'ha, e
  l'unico modo di farlo senza inventarsi una password e' quello. Chi e'
  nuovo non va a cercarlo dietro una linguetta che si chiama "Login".

  Quello che non andava era come si presentava: a colonna sola il titolo
  "Accesso rapido" finiva incollato sotto la casella della password, con
  la riga "OPPURE" nel mezzo sbagliato, e sembrava un pezzo avanzato. Con
  le due colonne diventa la stessa cosa che si vede in "Login", al suo
  posto.

  Le parole invece cambiano - "Registrazione rapida", "Nessuna password
  da inventare" - e le scrive sdaccesso.js, perche' a chi si sta
  iscrivendo non si dice "nessuna password da ricordare": non deve
  ricordarla, deve inventarsela.
*/

@media (min-width: 992px) {

    #checkoutLogin.sd-acc-registrati {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 380px);
        column-gap: 30px;
        align-items: start;
    }

    #checkoutLogin.sd-acc-registrati #supercheckout-option.login-options,
    #checkoutLogin.sd-acc-registrati .login-form,
    #checkoutLogin.sd-acc-registrati #supercheckout-new-customer-form.register-section,
    #checkoutLogin.sd-acc-registrati #social_login_block {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* la barra resta al centro, come nelle altre linguette */
    #checkoutLogin.sd-acc-registrati #supercheckout-option.login-options {
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: 460px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #checkoutLogin.sd-acc-registrati .login-form {
        grid-column: 1;
        grid-row: 2;
        max-width: 620px !important;
    }

    #checkoutLogin.sd-acc-registrati #supercheckout-new-customer-form.register-section {
        grid-column: 1;
        grid-row: 3;
        max-width: 620px !important;
    }

    #checkoutLogin.sd-acc-registrati #social_login_block {
        grid-column: 3;
        grid-row: 2 / span 2;
        padding-top: 4px !important;
    }

    #checkoutLogin.sd-acc-registrati #social_login_block .social-login,
    #checkoutLogin.sd-acc-registrati #social_login_block .sigInButtons {
        text-align: left !important;
    }

    #checkoutLogin.sd-acc-registrati::before {
        content: "";
        grid-column: 2;
        grid-row: 2 / span 2;
        justify-self: center;
        width: 1px;
        height: 100%;
        background: #e6e6e6;
    }

    #checkoutLogin.sd-acc-registrati::after {
        content: "OPPURE";
        grid-column: 2;
        grid-row: 2 / span 2;
        justify-self: center;
        align-self: center;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        padding: 10px 0;
        background: #fff;
        color: #9a9a9a;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .12em;
    }

    html[lang="en"] #checkoutLogin.sd-acc-registrati::after { content: "OR"; }
    html[lang="fr"] #checkoutLogin.sd-acc-registrati::after { content: "OU"; }
    html[lang="de"] #checkoutLogin.sd-acc-registrati::after { content: "ODER"; }
    html[lang="es"] #checkoutLogin.sd-acc-registrati::after { content: "O BIEN"; }

    #checkoutLogin.sd-acc-registrati #social_login_block .sigInButtons {
        padding-top: 0 !important;
    }

    #checkoutLogin.sd-acc-registrati #social_login_block .sigInButtons::before,
    #checkoutLogin.sd-acc-registrati #social_login_block .sigInButtons::after {
        display: none !important;
    }
}

/* ------------------------------------------------------------------ */
/*  La scritta del pulsante cambia con la linguetta                    */
/* ------------------------------------------------------------------ */
/*
  In "Login" si accede, in "Registrati" ci si iscrive: e' lo stesso
  pulsante e la stessa strada, ma chiamarla nello stesso modo in tutti e
  due i posti confonde chi un account non ce l'ha.
*/

#checkoutLogin.sd-acc-registrati #social_login_block .sigInButtons a.googleButton::after {
    content: "Registrati con Google";
}

html[lang="en"] #checkoutLogin.sd-acc-registrati #social_login_block .sigInButtons a.googleButton::after {
    content: "Sign up with Google";
}

html[lang="fr"] #checkoutLogin.sd-acc-registrati #social_login_block .sigInButtons a.googleButton::after {
    content: "S'inscrire avec Google";
}

html[lang="de"] #checkoutLogin.sd-acc-registrati #social_login_block .sigInButtons a.googleButton::after {
    content: "Mit Google registrieren";
}

html[lang="es"] #checkoutLogin.sd-acc-registrati #social_login_block .sigInButtons a.googleButton::after {
    content: "Registrarse con Google";
}