/* ==========================================================================
   login-toggle-responsive.css
   tienda.dreamers.es - colapsa el bloque de anuncio + iframe de login
   (encabezado.html, iframe /dreamers/ciudad/panelillo/panel.cgi) detras
   de un toggle en movil.

   Por que: el iframe de login es de 272x70px fijos y su contenido interno
   tambien es de ancho fijo (panel.cgi, sistema compartido con dreamers.es,
   no tocado aqui). En movil sale legible pero muy apretado, ocupando
   cabecera sin dar opcion a ocultarlo. Este fichero NO arregla el iframe
   por dentro, solo evita que este siempre visible y apretado en movil.

   Se carga DESPUES de shop2014.css. El checkbox se oculta siempre (es solo
   un contenedor de estado para el truco CSS de hermano ~, nunca debe
   pintarse en ningun ancho); todo lo demas que cambia geometria queda
   dentro de la media query, asi que el escritorio queda intacto.
   ========================================================================== */

.login-toggle-cb {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

@media (max-width: 860px) {
  .login-toggle-label {
    display: block;
    text-align: right;
    padding: 6px 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #003399;
    cursor: pointer;
  }

  .login-toggle-label:after {
    content: "\25BE";
    margin-left: 4px;
  }

  .login-toggle-cb:checked ~ .login-toggle-label:after {
    content: "\25B4";
  }

  .bigbanner {
    display: none;
  }

  .login-toggle-cb:checked ~ .bigbanner {
    display: block;
    max-width: 280px;
    margin: 0 0 0 auto;
  }
}

@media (min-width: 861px) {
  .login-toggle-label {
    display: none;
  }
}