/* ---------- 0) Базовые утилиты ---------- */
:root {
  --lg-fqc-border: #e5e7eb;
  --lg-fqc-text:   #111827;
  --lg-fqc-muted:  #374151;
  --lg-fqc-bg:     #fff;
  --lg-cta-bg:     #2b2b2b;
  --lg-cta-bg-h:   #1f1f1f;
}

.single-product form.cart .quantity-button {
  display: grid;
  grid-template-columns: 1fr 240px; /* ширину колонки кнопки можно менять (220–280px) */
  gap: 0;                            /* без щели между таблицей и кнопкой */
  align-items: stretch;              /* тянем обе колонки на одинаковую высоту */
  box-sizing: border-box;
}

/* ---------- 1) Таблица калькулятора (левая колонка) ---------- */
#price_calculator.wc-measurement-price-calculator-price-table {
  width: 100%;
  height: 100%;                                /* важный момент для равной высоты */
  background: var(--lg-fqc-bg);
  color: var(--lg-fqc-text);
  border: 1px solid var(--lg-fqc-border);
  border-right: 0;                              /* чтобы не было двойной линии на стыке */
  border-radius: 10px 0 0 10px;                 /* скругления только слева */
  border-collapse: collapse;                    /* чтобы границы не добавляли «лишнюю» высоту */
  border-spacing: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#price_calculator td {
  padding: 16px;
  vertical-align: middle;
  font-size: 16px;
  color: var(--lg-fqc-text);
  box-sizing: border-box;
}
#price_calculator tr + tr td {
  border-top: 1px solid var(--lg-fqc-border);
}
#price_calculator td:first-child {
  width: 55%;
  color: var(--lg-fqc-muted);
}
#price_calculator td:last-child {
  text-align: right;
}

/* Поле ввода — короче и аккуратнее */
#price_calculator input.amount_needed {
  width: 120px;
  max-width: 120px;
  height: 38px;
  line-height: 36px;
  text-align: center;
  border: 1px solid var(--lg-fqc-border);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  box-sizing: border-box;
}

/* ---------- 2) Кнопка «Add to cart» (правая колонка) ---------- */
.single-product form.cart .single_add_to_cart_button.button.alt {
  width: 100%;
  height: auto;             /* убираем фикс, чтобы тянуться по сетке */
  min-height: 100%;         /* растягиваем до высоты левой колонки */
  align-self: stretch;      /* дополнительная страховка */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;      /* предотвращает «выпирание» из-за line-height темы */
  margin: 0;
  padding: 0 18px;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
  background: var(--lg-cta-bg);
  color: #fff;
  border: 1px solid var(--lg-fqc-border);
  border-left: 0;           /* стык с таблицей */
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: background .2s ease, transform .05s ease, box-shadow .2s ease;
  box-sizing: border-box;
}
.single-product form.cart .single_add_to_cart_button.button.alt:hover {
  background: var(--lg-cta-bg-h);
}
.single-product form.cart .single_add_to_cart_button.button.alt:active {
  transform: translateY(1px);
}
.single-product form.cart .single_add_to_cart_button.button.alt:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

/* ---------- 3) Убираем дублирующий Woo блок количества внутри этой связки ---------- */
.single-product form.cart .quantity-button .quantity {
  display: none !important;
}

/* ---------- 4) Чистим «серые полосы» темы на .quantity (защита от стилей Funio) ---------- */
.single-product .summary .quantity,
.woocommerce div.product form.cart div.quantity {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.single-product .summary .quantity::before,
.single-product .summary .quantity::after,
.woocommerce div.product form.cart div.quantity::before,
.woocommerce div.product form.cart div.quantity::after {
  content: none !important;
  display: none !important;
}

/* ---------- 5) Мобильная адаптация ---------- */
@media (max-width: 768px) {
  .single-product form.cart .quantity-button {
    grid-template-columns: 1fr;  /* одна колонка */
    gap: 0;
  }

  #price_calculator.wc-measurement-price-calculator-price-table {
    border-right: 1px solid var(--lg-fqc-border);
    border-radius: 10px 10px 0 0;  /* сверху скругляем */
    height: auto;                   /* на мобилке пусть растёт по содержимому */
  }

  .single-product form.cart .single_add_to_cart_button.button.alt {
    border-left: 1px solid var(--lg-fqc-border);
    border-top: 0;
    border-radius: 0 0 10px 10px;   /* снизу скругляем */
    height: 52px;                   /* удобнее нажимать */
    min-height: 52px;
  }
}

/* Хинт под таблицей */
#price_calculator .lg-fqc-hint-row td {
  padding: 12px 16px;
  font-size: 14px;
  color: #4b5563; /* нейтральный серый */
  border-top: 1px dashed var(--lg-fqc-border);
}
#price_calculator .lg-fqc-hint-label {
  font-style: italic;
  color: #6b7280;
}
#price_calculator .lg-fqc-hint-row td:first-child {
  font-style: italic;
  color: #6b7280;
}

/* Подсказка об округлении под полем ввода */
#price_calculator .lg-fqc-round-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.25;
  color: #6b7280; /* спокойный серый */
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease;
}
#price_calculator .lg-fqc-round-note.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cart/Checkout: выровнять variation (Area/Boxes) в одну строку */
.woocommerce-cart dl.variation,
.woocommerce-checkout dl.variation {
  display: grid;
  grid-template-columns: auto 1fr; /* слева лейбл, справа значение */
  column-gap: 8px;
  row-gap: 4px;
  margin: 6px 0 0;
}

.woocommerce-cart dl.variation dt,
.woocommerce-cart dl.variation dd,
.woocommerce-checkout dl.variation dt,
.woocommerce-checkout dl.variation dd {
  margin: 0;
  padding: 0;
  float: none;         /* на всякий случай: темы иногда флотят их */
  display: block;      /* элементы сетки */
  line-height: 1.4;
}

.woocommerce-cart dl.variation dt,
.woocommerce-checkout dl.variation dt {
  font-weight: 600;    /* "Area:" / "Boxes:" чуть выделить */
}

.woocommerce-cart dl.variation dd p,
.woocommerce-checkout dl.variation dd p {
  margin: 0;
  display: inline;     /* убираем переносы внутри значения */
}