.elementor-1339 .elementor-element.elementor-element-7cf62640{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1339 .elementor-element.elementor-element-58df4f4a{color:#0C87B6;}/* Start custom CSS for text-editor, class: .elementor-element-58df4f4a */#purchase-for-someone-else {
  position: relative;
  display: none;
}
/* --- Mejoras Responsivas para el Formulario de Checkout de WooCommerce --- */

/* Para pantallas pequeñas (ej. móviles, hasta 768px de ancho).
   Puedes ajustar el valor de 768px según tus necesidades. */
@media (max-width: 768px) {

    /* Apilar campos que están en dos columnas (como Nombre y Apellidos) */
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important; /* Asegura que ocupen todo el ancho */
        float: none !important;   /* Elimina el flotado para que se apilen */
        margin-right: 0 !important; /* Elimina el margen derecho si lo hubiera */
    }

    /* Asegurar que todos los campos de formulario tengan un ancho completo si es necesario */
    .woocommerce-checkout .form-row {
        width: 100% !important;
        /* Ajustar márgenes si es necesario */
        margin-bottom: 15px; /* Espacio entre filas de campos */
    }

    /* Opcional: Ajustar el tamaño de la fuente para mejorar la legibilidad en móviles */
    .woocommerce-checkout .form-row label,
    .woocommerce-checkout .form-row input.input-text,
    .woocommerce-checkout .form-row textarea,
    .woocommerce-checkout .form-row select {
        font-size: 15px; /* Ajusta el tamaño según tus preferencias */
    }

    /* Ajustar el ancho del input de teléfono si es necesario
       (A veces los temas le dan un ancho específico) */
    .woocommerce-checkout #billing_phone_field input#billing_phone {
         width: 100% !important;
    }

     /* Ajustar la caja de "Información adicional" */
    .woocommerce-checkout #order_comments_field textarea {
        min-height: 100px; /* Altura mínima más pequeña para móviles */
    }
}

/* --- Ajustes generales que pueden aplicar a todas las pantallas (opcional) --- */

/* Mejorar el espaciado entre campos si es necesario */
.woocommerce-checkout .form-row {
    margin-bottom: 20px; /* Ajusta según tus preferencias */
}
/* --- Ajustes para campos Nombre y Apellidos en VISTA PC --- */

/* Aplicar estos estilos solo a pantallas más grandes (ej. mayores de 768px) */
@media (min-width: 769px) { /* Ajusta este valor si tu 'breakpoint' de móvil es diferente */

    .woocommerce-checkout .form-row-first {
        width: 48%;       /* Ancho del primer campo (Nombre) */
        margin-right: 4%; /* Este es el ESPACIO DE SEPARACIÓN hacia el segundo campo */
        float: left;      /* Alinea a la izquierda para estar al lado del siguiente */
        clear: none;      /* Asegura que no limpie flotados anteriores innecesariamente */
    }

    .woocommerce-checkout .form-row-last {
        width: 48%;       /* Ancho del segundo campo (Apellidos) */
        float: left;      /* También flota a la izquierda para seguir al primero.
                              Algunos temas usan float: right; aquí, depende de la estructura. */
        margin-right: 0;  /* Generalmente no necesita margen derecho si es el último */
        clear: none;
    }

    /* Opcional: Si los campos se descolocan, asegúrate de que el contenedor padre limpie los flotados.
       WooCommerce suele tener un div que envuelve estos campos.
       Esto es un ejemplo, el .elementor-1339 .elementor-element.elementor-element-58df4f4a exacto puede variar según tu tema. */
    .woocommerce-billing-fields__field-wrapper::after,
    .woocommerce-shipping-fields__field-wrapper::after, /* Si también aplica a envío */
    .woocommerce-checkout form .col2-set .form-row::after, /* Un contenedor común en WC */
    .woocommerce form .form-row::after { /* Un clearfix más genérico para form-row */
        content: "";
        display: table;
        clear: both;
    }
}/* End custom CSS */