/* ===============================================================
   Carrito, pago y cuenta
   Después de una ficha cuidada, llegar a un formulario genérico
   baja el tono justo en el momento de pagar. Aquí se unifican
   botones, campos y tablas con el resto del sitio.
   =============================================================== */

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
  font-size: var(--sym-step-3);
  margin-bottom: var(--sym-gap-m);
}

/* ---- Botones ----------------------------------------------------
   Astra pinta todos los .button de WooCommerce con su verde. Aquí el
   botón que cierra la compra es el único oscuro; el resto, discretos.
   ----------------------------------------------------------------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.5rem;
  background: transparent;
  border: 1.5px solid var(--sym-ink);
  border-radius: 999px;
  color: var(--sym-ink);
  font-family: var(--sym-font-body);
  font-size: var(--sym-step--1);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
  background: var(--sym-ink);
  color: var(--sym-bone);
}

/* El que cierra: sólido y sin competencia visual alrededor. */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.checkout-button,
.woocommerce #place_order {
  background: var(--sym-ink);
  border-color: var(--sym-ink);
  color: var(--sym-bone);
  padding: 1.05rem 2rem;
  font-size: var(--sym-step-0);
}

.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
  background: var(--sym-accent-deep);
  border-color: var(--sym-accent-deep);
  color: #fff;
}

.woocommerce .button:disabled,
.woocommerce .button[disabled] { opacity: .45; }

.woocommerce .button:focus-visible,
.woocommerce #place_order:focus-visible {
  outline: 2px solid var(--sym-accent-deep);
  outline-offset: 3px;
}

/* ---- Campos de formulario ---------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 3.1rem;
  padding: .75rem 1rem;
  background: #fff;
  border: 1.5px solid var(--sym-clay);
  border-radius: var(--sym-radius-sm);
  font-family: var(--sym-font-body);
  font-size: var(--sym-step-0);
  color: var(--sym-ink);
  transition: border-color .15s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--sym-accent-deep);
  outline: none;
}

.woocommerce form .form-row label {
  margin-bottom: .35rem;
  font-size: var(--sym-step--1);
  font-weight: 600;
  color: var(--sym-ink-soft);
}

.woocommerce form .form-row .required { color: var(--sym-accent); text-decoration: none; }

/* ---- Tablas del carrito y del pedido ------------------------------ */
.woocommerce table.shop_table {
  border: 1px solid var(--sym-clay);
  border-radius: var(--sym-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}

.woocommerce table.shop_table th {
  padding: 1rem 1.15rem;
  background: var(--sym-bone);
  border-bottom: 1px solid var(--sym-clay);
  font-size: var(--sym-step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sym-ink-mute);
}

.woocommerce table.shop_table td {
  padding: 1.15rem;
  border-top: 0;
  border-bottom: 1px solid var(--sym-sand);
  vertical-align: middle;
}

.woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }

.woocommerce table.cart img {
  width: 72px;
  border-radius: var(--sym-radius-sm);
  background: var(--sym-sand);
}

.woocommerce table.cart td.product-name a { color: var(--sym-ink); text-decoration: none; font-weight: 600; }
.woocommerce table.cart td.product-name a:hover { text-decoration: underline; }

.woocommerce .quantity input.qty {
  min-height: 2.9rem;
  padding: 0 .5rem;
  border: 1.5px solid var(--sym-clay);
  border-radius: var(--sym-radius-sm);
  background: #fff;
  text-align: center;
}

.woocommerce .product-remove a.remove {
  color: var(--sym-ink-mute) !important;
  font-size: 1.4rem;
}

.woocommerce .product-remove a.remove:hover {
  background: transparent !important;
  color: var(--sym-accent) !important;
}

/* La fila de acciones del carrito respira y separa cupón de actualizar.
   Ojo: esta celda lleva colspan y debe seguir siendo table-cell. Ponerle
   display:flex la saca del modelo de tabla y se encoge a una columna. */
.woocommerce table.cart td.actions {
  padding: var(--sym-gap-s) 1.15rem;
  background: var(--sym-bone);
  text-align: right;
}

.woocommerce table.cart td.actions::after {
  content: "";
  display: block;
  clear: both;
}

.woocommerce table.cart td.actions .coupon {
  float: left;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.woocommerce table.cart td.actions .coupon .input-text { width: auto; min-width: 12rem; }

/* ---- Totales ------------------------------------------------------ */
.cart_totals,
.woocommerce-checkout-review-order {
  padding: var(--sym-gap-m);
  background: var(--sym-accent-wash);
  border-radius: var(--sym-radius);
}

.cart_totals h2,
.woocommerce-checkout h3#order_review_heading {
  margin-top: 0;
  font-size: var(--sym-step-1);
}

.cart_totals table.shop_table,
.woocommerce-checkout-review-order table.shop_table {
  background: transparent;
  border: 0;
}

.cart_totals table.shop_table th,
.woocommerce-checkout-review-order table.shop_table th {
  background: transparent;
  border-bottom: 1px solid var(--sym-clay);
  text-transform: none;
  font-size: var(--sym-step-0);
  color: var(--sym-ink);
}

.cart_totals .order-total .amount,
.woocommerce-checkout-review-order .order-total .amount {
  font-family: var(--sym-font-display);
  font-size: var(--sym-step-2);
}

/* ---- Métodos de pago ---------------------------------------------- */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: var(--sym-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: .5rem;
  padding: var(--sym-gap-s);
  background: #fff;
  border: 1.5px solid var(--sym-clay);
  border-radius: var(--sym-radius-sm);
  list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--sym-bone);
  border-radius: var(--sym-radius-sm);
  font-size: var(--sym-step--1);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* ---- Avisos -------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 0;
  border-left: 3px solid var(--sym-accent-deep);
  border-radius: var(--sym-radius-sm);
  background: var(--sym-accent-wash);
  color: var(--sym-ink);
}

.woocommerce-error { border-left-color: var(--sym-accent); background: #fdf3ec; }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--sym-accent-deep); }

@media (max-width: 600px) {
  .woocommerce table.cart td.actions { text-align: left; }
  .woocommerce table.cart td.actions .coupon { float: none; display: flex; width: 100%; }
  .woocommerce table.cart td.actions .coupon .input-text { width: 100%; }
  .woocommerce .button,
  .woocommerce a.button { width: 100%; }
}

/* ---- Aviso de fabricación a medida ------------------------------- */
.sym-mto {
  margin: var(--sym-gap-s) 0;
  padding: var(--sym-gap-s);
  background: #fff;
  border: 1.5px solid var(--sym-clay);
  border-left: 3px solid var(--sym-accent);
  border-radius: var(--sym-radius-sm);
}

.sym-mto__text {
  margin: 0 0 .5rem;
  font-size: var(--sym-step--1);
  line-height: 1.55;
  color: var(--sym-ink-soft);
}

.sym-mto__text--soft { color: var(--sym-ink-mute); }

.sym-mto__check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  font-size: var(--sym-step--1);
  font-weight: 500;
  color: var(--sym-ink);
  cursor: pointer;
}

.sym-mto__check input { margin-top: .2rem; flex: 0 0 auto; }
.sym-mto__check .required { color: var(--sym-accent); text-decoration: none; }