/*
 * Improve Equine Child Theme — shop-grid.css
 * Source: WPCode snippet 1631
 * Migrated: Phase E (2026-05-31)
 */

/* Quantity stepper */
.ie-qty-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 8px auto;
  width: fit-content;
}

.ie-qty-minus,
.ie-qty-plus {
  background: #1a5f6e;
  color: #fff;
  border: none;
  width: 30px;
  height: 34px;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px 0 0 4px;
}

.ie-qty-plus {
  border-radius: 0 4px 4px 0;
}

.ie-qty-minus:hover,
.ie-qty-plus:hover {
  background: #154f5b;
}

.ie-qty-input {
  width: 44px;
  height: 34px;
  text-align: center;
  border: 1px solid #ccc;
  border-left: none;
  border-right: none;
  font-size: 14px;
  -moz-appearance: textfield;
}

.ie-qty-input::-webkit-outer-spin-button,
.ie-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Variable product inline form */
.ie-var-form {
  padding: 8px 12px 12px;
  text-align: center;
}

.ie-var-select {
  display: block;
  width: 100%;
  margin: 0 auto 8px;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}

.ie-atc-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: #1a1a1a;
  color: #fff !important;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.ie-atc-btn:hover:not(:disabled) {
  background: #1a5f6e;
}

.ie-atc-btn:disabled {
  background: #aaa;
  cursor: not-allowed;
}


/* ----------------------------------------------------------------
   Related-products grid on single-product pages.
   Related products render via WooCommerce's Product Collection block
   (ul.wp-block-woocommerce-product-template.is-flex-container.columns-5),
   NOT the classic ul.products. On the single-product template the block's
   own column CSS isn't taking effect, so the cards collapse to ~1 char wide.
   This gives that template an explicit responsive grid that wraps to one
   column on phones. Specificity (.single-product + ul + 2 classes) beats the
   block's default without !important, and the .single-product scope keeps the
   shop/category collection grids untouched.
---------------------------------------------------------------- */
.single-product ul.wp-block-woocommerce-product-template.is-flex-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.single-product ul.wp-block-woocommerce-product-template.is-flex-container > li.product {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  float: none;
}
.single-product ul.wp-block-woocommerce-product-template.is-flex-container > li.product img {
  width: 100%;
  height: auto;
  display: block;
}