/*
Theme Name: Hello Child
Template: hello-elementor
Version: 1.0
*/

p.continue-shopping a.button {
    display: inline-block !important;
    margin: 0 0 20px !important;
    color: white !important;
    background-color: #2F9C41 !important;
}

.product-short-description {
    margin-top: 8px;
    font-size: 0.95em;
    line-height: 1.4;
}

#order_review_heading {display: none !important;}

.add_to_cart_button {background-color: #FC8560 !important; color: white !important; }

.single_add_to_cart_button {background-color: #FC8560 !important; color: white !important; }

:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt {background-color: #2F9C41 !important; color: white !important; margin: 0 0 !important; padding: 0 0 20px !important;}

#add_payment_method .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {background-color: #2F9C41 !important; color: white !important; margin: 0 0 !important; padding: 0 0 20px !important;}

.woocommerce a.remove {font-size: 3em !important; color: #2F9C41 !important;}

#add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img {width: 64px !important;}

.woocommerce .cart .button, .woocommerce .cart input.button {background-color: #2F9C41 !important; color: white !important; }

/* 1. Permanently hide native browser spin buttons */
/* Hide native browser spin buttons everywhere across the site */
input.qty::-webkit-outer-spin-button,
input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

input.qty {
  -moz-appearance: textfield !important; /* Fixes Firefox globally */
}


/* 2. Align buttons and input field into a clean row */
.product-quantity .quantity {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-radius: 4px;
  overflow: hidden;
  width: max-content;
}

/* 3. Style the Plus and Minus buttons */
.product-quantity .quantity .minus,
.product-quantity .quantity .plus {
  background: #313639;
  border: none !important;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  height: 40px;
  width: 35px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.product-quantity .quantity .minus:hover,
.product-quantity .quantity .plus:hover {
  background: #e0e0e0;
}

/* 4. Format the inner quantity input box */
.product-quantity .quantity input.qty {
  border: none !important; /* Removes inner borders overlapping the buttons */
  text-align: center !important;
  width: 50px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;
}

.elementor-kit-6 button {background-color: #9898b3 !important;}

[type="button"], [type="submit"], button {border: none !important;}


.related.products {
  clear: both !important;
  display: block !important;
  width: 100% !important;
}

/* 1. Hide the "Product categories" widget heading */
.woocommerce-ordering .widget_product_categories .widgettitle {
  display: none !important;
}

/* 2. Fix text displacement, add spacing, and increase box size */
.woocommerce-ordering select.dropdown_product_cat select2-selection__placeholder {
  height: 44px !important;         /* Increases the overall thickness of the box */
  line-height: 44px !important;    /* Perfectly centres the text vertically */
  padding-top: 0 !important;       /* Removes conflicting top spacing pushing text down */
  padding-bottom: 0 !important;    /* Removes conflicting bottom spacing */
  padding-left: 12px !important;   /* Adds a comfortable gap on the left edge */
  padding-right: 35px !important;  /* Leaves space for the native dropdown arrow icon */
  vertical-align: middle !important;
  font-size: 16px !important;      /* Ensures the font sizes match the box height scaled appropriately */
}

/* 1. Global Select2 container fix - targets it even during AJAX reloads */
.select2-container .select2-selection--single {
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
}

/* 2. Absolute reset for text placement inside the rendered box */
.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection__placeholder {
  line-height: 44px !important;
  padding-left: 12px !important;
  padding-right: 30px !important;
  margin: 0 !important;
  display: block !important;
  vertical-align: middle !important;
}

/* 3. Keep the dropdown arrow perfectly centered during updates */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* 4. Nuclear option to ensure the title stays hidden after AJAX loops */
span.woocommerce-ordering .widgettitle,
.widget_product_categories .widgettitle {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}