/* Reglas que el tema traía en <style> dentro del <body> de todas las páginas
   (botón del menú móvil y placeholder del formulario del pie), más las clases
   que sustituyen a los pocos atributos style= que quedaban. Se enlaza DESPUÉS de
   contact-form-7.css, que es donde estaban en la cascada. */

    .trigger {
        position: relative;
        width: 24px;
        height: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: transparent;
        border: 0;
        outline: 0;
        padding: 0;
        cursor: pointer;
    }

    .trigger span {
        height: 1px;
        display: block;
        overflow: hidden;
        text-indent: -9999px;
        background-color: var(--color-primary);
        pointer-events: none;
    }

    .trigger::before {
        content: "";
        height: 1px;
        width: 100%;
        background-color: var(--color-primary);
        pointer-events: none;
    }

    .trigger::after {
        content: "";
        height: 1px;
        width: 100%;
        background-color: var(--color-primary);
        pointer-events: none;
    }

    @media (min-width: 1024px){
        .trigger {
            display: none;
        }
    }

.newsletter__form__input::placeholder {
  color: white;
}

/* --- Clases que sustituyen a los atributos style= del markup ---------------- */
/* `.product__logo__img` declara `--width: auto` en theme/style.css; estas clases lo
   pisan por orden de cascada (misma especificidad, hoja posterior). */
.product__logo__img--w150 { --width: 150px; }
.product__logo__img--w185 { --width: 185px; }
.product__logo__img--w252 { --width: 252px; }

/* La flecha del hero se solapaba con la sección siguiente; `.down` no fija z-index. */
.down--front { z-index: 10; }