/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* 1) Let the add-to-cart container wrap to a new row */
.single-product .woocommerce-variation-add-to-cart.variations_button,
.single-product form.cart .variations_button {
  display: flex;                 /* many themes already do this */
  flex-wrap: wrap !important;    /* <-- key */
  gap: 12px;
}

/* 2) Put your custom-name row on its own line (full width) */
.single-product .variations_button .wc-custom-name-wrap {
  order: -1;                     /* show above qty/button */
  flex: 0 0 100% !important;     /* take entire row */
  display: flex;
  align-items:flex-start;
  gap: 10px;
  margin: 10px 0 6px !important;
}

/* 3) Keep checkbox + label + input inline */
#wc_custom_name_field {
  display:grid;
  align-items: center;
  gap: 8px;
}

/* 4) Tidy the input */
#wc_custom_name_field input[type="text"] {
  min-width: 220px;
  padding: 6px 10px;
  font-size: 14px;
}

/* 5) Mobile: stack the label + input */
@media (max-width: 600px) {
  .single-product .variations_button .wc-custom-name-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #wc_custom_name_field input[type="text"] {
    min-width: 0;
    width: 100%;
  }
}