/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

	/* =========================================
   SINGLE PRODUCT: Qty + Add to cart layout
   ========================================= */

/* 1. Put quantity + button on ONE line */
.single-product form.cart {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 16px;
}

/* 2. Quantity wrapper: single outer border (pill) */
.single-product form.cart .quantity {
  display: flex !important;
  align-items: stretch;
  margin: 0 !important;
  width: 120px;              /* adjust width as you like */
  border: 1px solid #000;    /* border colour */
  border-radius: 999px;      /* pill shape – change to 6px for normal rounded */
  overflow: hidden;          /* hides inner edges */
  background: #fff;
}

/* 3. Remove ALL inner borders (+, -, input) */
.single-product form.cart .quantity .qty,
.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
}

/* 4. Style - and + buttons */
.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus {
  padding: 0 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

/* 5. Style the number input */
.single-product form.cart .quantity .qty {
  flex: 1 0 auto;
  min-width: 0;
  text-align: center;
  padding: 0 4px;
}

/* Remove browser number spinners */
.single-product form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product form.cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.single-product form.cart .quantity .qty[type="number"] {
  -moz-appearance: textfield;
}

/* 6. No ugly focus outlines inside the pill */
.single-product form.cart .quantity *:focus {
  outline: none !important;
}

/* 7. Optional: stack on very small screens */
@media (max-width: 480px) {
  .single-product form.cart {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================
   Align quantity + button perfectly
   ========================================= */

/* Give both flex items the same height */
.single-product form.cart .quantity,
.single-product form.cart .single_add_to_cart_button {
  height: 44px;          /* tweak to taste */
  line-height: 1;
}

/* Center the button text vertically & remove stray margins */
.single-product form.cart .single_add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

/* Center the content inside the quantity pill */
.single-product form.cart .quantity {
  align-items: center;   /* vertical centering of -, number, + */
}