/* ==========================================================================
   wazo-theme · assets/css/carrito.css
   Carrito y checkout: dos columnas, contenido a la izquierda y resumen fijo
   a la derecha, replicando el layout del tema original de wazo.cl.
   ========================================================================== */

/* El carrito no usa el ancho de lectura de las páginas de contenido. */
.woocommerce-cart .wazo-page-content,
.woocommerce-checkout .wazo-page-content,
.woocommerce-account .wazo-page-content {
  max-width: none;
}

/* ---- Estructura de dos columnas ---- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 0 44px;
  align-items: start;
}

/* Los pasos y los avisos ocupan las dos columnas. */
.woocommerce-cart .wazo-pasos,
.woocommerce-checkout .wazo-pasos,
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
  grid-column: 1 / -1;
}

.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; min-width: 0; }
.woocommerce-cart .cart-collaterals { grid-column: 2; grid-row: 3 / span 2; }
.woocommerce-checkout #customer_details { grid-column: 1; min-width: 0; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { grid-column: 2; grid-row: 3 / span 2; }
.woocommerce-checkout #order_review { position: sticky; top: 20px; }

/* ---- Pasos ---- */
.wazo-pasos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 4px 0 26px;
  padding: 0 0 18px;
  border-bottom: 1px solid #E3E6EE;
  font-size: 13.5px;
  color: #9AA2B4;
  list-style: none;
}
.wazo-pasos span { white-space: nowrap; }
.wazo-pasos .wazo-pasos__item--activo,
.wazo-pasos .wazo-pasos__item--hecho { color: #2E376A; font-weight: 700; }
.wazo-pasos .wazo-pasos__sep { color: #C9CFDB; }

/* ---- Tabla de productos ---- */
.woocommerce-cart table.shop_table.cart {
  width: 100%;
  border: 1px solid #E3E6EE;
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 0;
}
.woocommerce-cart table.shop_table.cart thead th {
  background: #F5F7FB;
  color: #6B7488;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 16px;
  border-bottom: 1px solid #E3E6EE;
  text-align: left;
}
.woocommerce-cart table.shop_table.cart tbody td {
  padding: 18px 16px;
  border-bottom: 1px solid #EEF1F7;
  vertical-align: middle;
  font-size: 15px;
  color: #1B2A4A;
}
.woocommerce-cart table.shop_table.cart tbody tr:last-child td { border-bottom: 0; }

/* Quitar producto */
.woocommerce-cart .product-remove { width: 40px; padding-left: 14px !important; }
.woocommerce-cart .product-remove a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F1F3F8;
  color: #8A93A8 !important;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.woocommerce-cart .product-remove a.remove:hover { background: #2E376A; color: #fff !important; }

/* Miniatura */
.woocommerce-cart .product-thumbnail { width: 92px; }
.woocommerce-cart .product-thumbnail img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #EEF1F7;
  border-radius: 8px;
  padding: 4px;
}

/* Nombre y SKU */
.woocommerce-cart .product-name a {
  color: #2E376A;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  display: inline-block;
}
.woocommerce-cart .product-name a:hover { color: #00793E; }

/* Precio y subtotal */
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal { white-space: nowrap; }
.woocommerce-cart .product-subtotal .amount { color: #2E376A; font-weight: 700; }

/* Cantidad */
.woocommerce-cart .product-quantity .quantity { display: inline-block; }
.woocommerce-cart .product-quantity input.qty {
  width: 68px;
  padding: 9px 8px;
  border: 1px solid #C9CFDB;
  border-radius: 8px;
  text-align: center;
  font-size: 15px;
  font-family: inherit;
  color: #1B2A4A;
  background: #fff;
}

/* Cupón y acciones */
.woocommerce-cart .coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 !important;
  border: 0 !important;
}
.woocommerce-cart .coupon input#coupon_code {
  width: 190px;
  padding: 11px 14px;
  border: 1px solid #C9CFDB;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.woocommerce-cart .coupon .button,
.woocommerce-cart td.actions > .button {
  background: #fff;
  border: 1px solid #C9CFDB;
  color: #2E376A;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.woocommerce-cart .coupon .button:hover,
.woocommerce-cart td.actions > .button:hover { border-color: #2E376A; background: #F5F7FB; }
.woocommerce-cart td.actions { padding: 14px 16px !important; background: #FAFBFD; }
.woocommerce-cart td.actions > .button[name="update_cart"] { float: right; }

/* ---- Resumen (cart_totals) ---- */
.woocommerce-cart .cart-collaterals { position: sticky; top: 20px; }
.woocommerce-cart .cart_totals > h2 {
  font-family: "Archivo Black", Karla, sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2E376A;
  margin: 0 0 14px;
}
.woocommerce-cart .cart_totals table.shop_table {
  width: 100%;
  border: 1px solid #E3E6EE;
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #FCFDFE;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  padding: 13px 18px;
  border-bottom: 1px solid #EEF1F7;
  font-size: 14.5px;
  text-align: left;
}
.woocommerce-cart .cart_totals table.shop_table th { color: #6B7488; font-weight: 500; }
.woocommerce-cart .cart_totals table.shop_table td { text-align: right; color: #1B2A4A; }
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
  border-bottom: 0;
  padding-top: 16px;
  padding-bottom: 18px;
  font-size: 16px;
}
.woocommerce-cart .cart_totals tr.order-total th {
  font-family: "Archivo Black", Karla, sans-serif;
  color: #2E376A;
  text-transform: uppercase;
  font-size: 13.5px;
  letter-spacing: .04em;
}
.woocommerce-cart .cart_totals tr.order-total .amount { color: #2E376A; font-weight: 700; font-size: 19px; }

/* Botón de pago */
.woocommerce-cart .wc-proceed-to-checkout { padding: 14px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  background: #00B047;
  color: #fff !important;
  padding: 16px 20px;
  border-radius: 8px;
  font-family: "Archivo Black", Karla, sans-serif;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #00793E; }

/* Seguir comprando */
.woocommerce-cart .cart_totals .wc-proceed-to-checkout + a,
.woocommerce-cart .cart_totals ~ a {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13.5px;
  color: #6B7488;
  text-decoration: underline;
}

/* Carrito vacío */
.woocommerce-cart .cart-empty {
  background: #F5F7FB;
  border: 1px solid #E3E6EE;
  border-radius: 10px;
  padding: 44px 24px !important;
  text-align: center;
  font-size: 16px;
  color: #2E376A;
  margin: 0 0 18px;
}
.woocommerce-cart .return-to-shop { text-align: center; }
.woocommerce-cart .return-to-shop a.button {
  display: inline-block;
  background: #2E376A;
  color: #fff !important;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  text-decoration: none;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .woocommerce-cart .cart-collaterals,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    grid-column: 1;
    grid-row: auto;
    position: static;
    margin-top: 24px;
  }
  .woocommerce-checkout #order_review_heading { margin-top: 28px; }
}

@media (max-width: 767px) {
  .woocommerce-cart table.shop_table.cart thead { display: none; }
  .woocommerce-cart table.shop_table.cart tbody td { display: block; border: 0; padding: 4px 16px; }
  .woocommerce-cart table.shop_table.cart tbody tr {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #EEF1F7;
    position: relative;
  }
  .woocommerce-cart .product-remove { position: absolute; top: 10px; right: 8px; width: auto; }
  .woocommerce-cart .product-thumbnail { display: none; }
  .woocommerce-cart .product-name { padding-top: 10px !important; }
  .woocommerce-cart td.actions { padding: 14px 16px !important; }
  .woocommerce-cart td.actions > .button[name="update_cart"] { float: none; margin-top: 10px; width: 100%; }
  .woocommerce-cart .coupon { flex-direction: column; align-items: stretch; }
  .woocommerce-cart .coupon input#coupon_code { width: 100%; }
}

/* ---- Correcciones de ancho: Bootstrap y WooCommerce dejan los totales
   con ancho propio y el botón se parte en varias líneas. ---- */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals {
  width: 100% !important;
  float: none !important;
  max-width: none !important;
}
.woocommerce-cart .cart_totals table.shop_table { width: 100% !important; }
.woocommerce-cart .wc-proceed-to-checkout { width: 100%; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Campo de cupón de la fila de acciones: sin caja rara cuando está oculto */
.woocommerce-cart td.actions .coupon input#coupon_code::placeholder { color: #9AA2B4; }
.woocommerce-cart td.actions .coupon:empty { display: none; }

/* Checkout: el resumen también ocupa su columna */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-checkout-review-order { width: 100% !important; float: none !important; }
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout #order_review table.shop_table { width: 100% !important; }
.woocommerce-checkout #place_order {
  width: 100%;
  background: #00B047;
  color: #fff !important;
  padding: 16px 20px;
  border: 0;
  border-radius: 8px;
  font-family: "Archivo Black", Karla, sans-serif;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.woocommerce-checkout #place_order:hover { background: #00793E; }

/* Botón «Actualizar carro»: aparece deshabilitado hasta que cambia la cantidad.
   Sin esto se ve como un recuadro vacío. */
.woocommerce-cart td.actions > .button[name="update_cart"] {
  float: right;
  background: #fff;
  border: 1px solid #C9CFDB;
  color: #2E376A;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
}
.woocommerce-cart td.actions > .button[name="update_cart"]:not([disabled]):hover {
  border-color: #2E376A;
  background: #F5F7FB;
}
.woocommerce-cart td.actions > .button[name="update_cart"][disabled] {
  /* Sin opacidad: con .45 el texto se lavaba sobre el fondo blanco y el
     botón parecía "blanco sobre blanco". Gris #6B7488 sobre blanco = 4.9:1. */
  opacity: 1;
  cursor: default;
  color: #6B7488;
  background: #F5F7FB;
  border-color: #C9CFDB;
}

/* Mientras se recalcula el carrito */
body.wazo-carro-cargando .woocommerce-cart-form { opacity: .6; transition: opacity .15s ease; pointer-events: none; }

/* El botón de actualizar queda como respaldo si el JS no corre */
@media (min-width: 768px) {
  .woocommerce-cart td.actions > .button[name="update_cart"] { font-size: 12px; padding: 9px 16px; }
}

/* ==========================================================================
   Checkout: WooCommerce no usa #customer_details/#order_review en esta
   versión, sino form.checkout > .col2-set + h3 + .woocommerce-checkout-review-order.
   ========================================================================== */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 0 44px;
  align-items: start;
}

/* Datos (facturación + envío) a la izquierda, ocupando toda la altura */
.woocommerce-checkout form.checkout .col2-set {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  float: none;
  min-width: 0;
}
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}
.woocommerce-checkout form.checkout .col2-set .col-2 { margin-top: 28px; }

/* Resumen a la derecha, pegado arriba */
.woocommerce-checkout form.checkout > h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 14px;
  font-family: "Archivo Black", Karla, sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2E376A;
}
.woocommerce-checkout .woocommerce-checkout-review-order {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 20px;
}

/* Avisos ocupan las dos columnas */
.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout { grid-column: 1 / -1; }

/* Campos del checkout */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-family: "Archivo Black", Karla, sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2E376A;
  margin: 0 0 16px;
}
.woocommerce-checkout .form-row {
  float: none !important;
  width: 100% !important;
  padding: 0 0 14px !important;
  margin: 0 !important;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  float: none !important;
  width: 100% !important;
}
.woocommerce-checkout .form-row label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #3C4658;
  margin-bottom: 6px;
}
.woocommerce-checkout .form-row .required { color: #D93025; text-decoration: none; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100% !important;
  padding: 12px 14px;
  border: 1px solid #C9CFDB;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: #1B2A4A;
  background: #fff;
  height: auto;
  line-height: 1.4;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  outline: 2px solid #00B047;
  outline-offset: 1px;
  border-color: #00B047;
}
.woocommerce-checkout .select2-container { width: 100% !important; }
.woocommerce-checkout .select2-container .select2-selection--single { padding: 10px 14px; }
.woocommerce-checkout .select2-selection__rendered { line-height: 1.4 !important; padding: 0 !important; }
.woocommerce-checkout .select2-selection__arrow { height: 100% !important; top: 0 !important; }

/* Casilla «enviar a otra dirección» */
.woocommerce-checkout #ship-to-different-address {
  font-size: 14px;
  font-weight: 600;
  color: #3C4658;
  margin: 0 0 18px;
}
.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
}

/* Tabla del pedido y pago */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border: 1px solid #E3E6EE;
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: 18px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  padding: 11px 16px;
  border-bottom: 1px solid #EEF1F7;
  font-size: 14px;
  text-align: left;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table td:last-child { text-align: right; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total td {
  border-bottom: 0;
  font-size: 16px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.order-total .amount { color: #2E376A; font-weight: 700; font-size: 19px; }

.woocommerce-checkout #payment {
  background: #FCFDFE;
  border: 1px solid #E3E6EE;
  border-radius: 10px;
  padding: 18px;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 10px 0;
  border-bottom: 1px solid #EEF1F7;
  font-size: 14.5px;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce-checkout #payment div.place-order { padding: 0; margin: 0; }

@media (max-width: 991px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .woocommerce-checkout form.checkout .col2-set { grid-column: 1; grid-row: auto; }
  .woocommerce-checkout form.checkout > h3 { grid-column: 1; grid-row: auto; margin-top: 28px; }
  .woocommerce-checkout .woocommerce-checkout-review-order { grid-column: 1; grid-row: auto; position: static; }
}

/* El resumen debe quedar arriba a la derecha, no al final de la página:
   la fila 1 la define el título y la 2 toma el resto. */
.woocommerce-checkout form.checkout {
  grid-template-rows: auto 1fr;
}
.woocommerce-checkout form.checkout > h3 {
  align-self: start;
}
.woocommerce-checkout .woocommerce-checkout-review-order {
  align-self: start;
}
@media (max-width: 991px) {
  .woocommerce-checkout form.checkout { grid-template-rows: auto; }
}

/* Layout final del checkout: los tres bloques viven en la fila 1, cada uno
   anclado arriba. Así el resumen queda pegado al inicio de los datos y no al
   final de la página (que es lo que pasaba al repartir el alto en dos filas). */
.woocommerce-checkout form.checkout {
  grid-template-rows: auto;
}
.woocommerce-checkout form.checkout .col2-set {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}
.woocommerce-checkout form.checkout > h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-top: 42px;
}

/* WooCommerce sí usa #order_review_heading y #order_review: esas reglas viejas
   (que los mandaban a la fila 3) ganaban por especificidad de ID. Se fijan
   arriba, en la columna del resumen. */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  position: static !important;
  width: 100% !important;
  float: none !important;
}
.woocommerce-checkout #order_review_heading { margin: 0 !important; }
.woocommerce-checkout #order_review { margin-top: 42px !important; }

/* Casilla de términos y condiciones: WooCommerce la deja apretada y el texto
   se corta contra el borde del recuadro de pago. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 16px;
  padding: 0;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 13px;
  line-height: 1.55;
  color: #5B6478;
  margin: 0 0 14px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a { color: #00793E; text-decoration: underline; }
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: #3C4658;
}
.woocommerce-checkout .form-row.terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 14px !important;
}
.woocommerce-checkout .form-row.terms label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.woocommerce-checkout .form-row.terms input[type="checkbox"] {
  margin: 3px 0 0;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: #00B047;
}
.woocommerce-checkout .form-row.terms .required { color: #D93025; }
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a { color: #00793E; text-decoration: underline; }

/* Aviso de error del pago, legible */
.woocommerce-checkout .woocommerce-error {
  background: #FDECEA;
  border: 1px solid #F5C6C0;
  border-radius: 8px;
  padding: 14px 18px;
  color: #8A1C10;
  font-size: 14px;
  margin: 0 0 18px;
  list-style: none;
}

/* Casilla de términos: el markup real de WooCommerce es
   p.form-row > label.woocommerce-form__label-for-checkbox > span.…checkbox-text */
.woocommerce-checkout #payment .form-row.validate-required { padding: 0 !important; }
.woocommerce-checkout #payment label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
  color: #3C4658;
  margin: 0 0 16px;
  cursor: pointer;
}
.woocommerce-checkout #payment input.woocommerce-form__input-checkbox {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 17px;
  height: 17px;
  min-width: 17px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: #00B047;
  border: 1px solid #C9CFDB;
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-checkbox-text {
  flex: 1 1 auto;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3C4658;
}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-checkbox-text a {
  color: #00793E;
  text-decoration: underline;
}

/* En móvil la fila de acciones queda como un recuadro vacío: la cantidad se
   recalcula sola, así que no hace falta el botón. */
@media (max-width: 767px) {
  .woocommerce-cart td.actions { display: none; }
  .woocommerce-cart td.actions .coupon { display: none; }
}
@media (max-width: 767px) {
  .woocommerce-cart table.shop_table.cart td.actions { display: none !important; }
}

/* Miniatura del producto más grande y legible */
.woocommerce-cart .product-thumbnail { width: 184px; padding-right: 10px !important; }
.woocommerce-cart .product-thumbnail img,
.woocommerce-cart .product-thumbnail a img {
  width: 150px !important;
  height: 150px !important;
  max-width: none !important;
  object-fit: contain;
  background: #fff;
  border: 1px solid #EEF1F7;
  border-radius: 10px;
  padding: 8px;
  display: block;
}

/*「Imagen en miniatura」es solo para lectores de pantalla: no debe verse.
   El tema no trae .screen-reader-text, así que se define aquí. */
.woocommerce-cart .screen-reader-text,
.woocommerce-cart .product-thumbnail span.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 991px) {
  .woocommerce-cart .product-thumbnail img,
  .woocommerce-cart .product-thumbnail a img {
    width: 110px !important;
    height: 110px !important;
  }
  .woocommerce-cart .product-thumbnail { width: 140px; }
}

/* ==========================================================================
   Checkout: aprovechar el ancho
   --------------------------------------------------------------------------
   Había DOS grillas anidadas reservando la misma columna de resumen: la de
   `.woocommerce` (1fr + 372) y otra dentro de `form.checkout` (1fr + 372).
   El formulario terminaba en 401 px de 1233 disponibles, con 23 campos
   apilados uno por uno.

   Ahora manda solo la grilla de `form.checkout`, y los campos cortos van en
   dos columnas (nombre/apellidos, región/comuna, teléfono/correo).
   ========================================================================== */

@media (min-width: 992px) {
  /* El contenedor exterior deja de repartir: lo hace form.checkout. */
  .woocommerce-checkout .woocommerce {
    display: block;
  }

  /* La columna de «Tu pedido» era de 356 px y la tabla quedaba en 310, con
     los nombres de producto apretados en 203. Sube a 430. */
  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 0 32px;
  }

  /* Campos en dos columnas dentro de cada bloque de dirección. */
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    align-items: start;
  }

  .woocommerce-checkout .form-row {
    grid-column: 1 / -1;
  }

  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last,
  #billing_state_field,
  #billing_city_field,
  #billing_phone_field,
  #billing_email_field,
  #shipping_state_field,
  #shipping_city_field,
  #shipping_phone_field {
    grid-column: span 1;
  }

  /* Nombre y apellidos comparten fila: sin saltos ni flotados heredados. */
  .woocommerce-checkout .form-row-first { clear: none !important; }
  .woocommerce-checkout .form-row-last  { clear: none !important; }
}

/* Bajo 992 px no hay ancho para dos columnas: una sola, o el formulario
   colapsa a 0 px (la columna del resumen mide 372 y se come todo). */
@media (max-width: 991px) {
  .woocommerce-checkout .woocommerce,
  .woocommerce-checkout form.checkout {
    display: block;
  }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: block;
  }
  .woocommerce-checkout form.checkout .col2-set {
    grid-row: auto;
  }
}

/* ==========================================================================
   Igualar el select de Comuna al de Región
   --------------------------------------------------------------------------
   Región usa Select2 (marcado propio, estilado por el tema). Comuna es un
   <select> nativo, y `app.min.css` —el CSS heredado de Jumpseller— le fuerza
   border-radius:0, borde, color y font-size .9 con !important. Quedaban dos
   diseños distintos en la misma fila.

   Aquí se le da al select nativo la misma caja que Select2 y su misma flecha,
   también con !important para ganarle a app.min.css.
   ========================================================================== */
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row select.select {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 43px !important;
  padding: 10px 34px 10px 14px !important;
  border: 1px solid #C9CFDB !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ij48L3BvbHlsaW5lPjwvc3ZnPg==") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px !important;
  color: #1B2A4A !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Mismo foco que Select2 y que el resto de los campos del checkout. */
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row select.select:focus {
  border-color: #00B047 !important;
  box-shadow: 0 0 0 2px rgba(0, 176, 71, .15) !important;
}

/* Deshabilitado (sin región elegida): gris, pero con la misma caja. */
.woocommerce-checkout .form-row select:disabled,
.woocommerce-checkout .form-row select.select:disabled {
  background-color: #F5F7FB !important;
  color: #6B7488 !important;
  border-color: #C9CFDB !important;
  cursor: default !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Un solo diseño para todos los campos del checkout
   --------------------------------------------------------------------------
   `app.min.css` pisa con !important los campos que su selector alcanza:
   `form input[type="email"]` (correo) y `form textarea` (notas) quedaban
   cuadrados, con borde gris oscuro y letra de 12.6 px, mientras los de texto
   y teléfono se veían bien. Las alturas tampoco coincidían (47 vs 43).
   ========================================================================== */

/* Campos de texto, correo, teléfono y notas: misma caja. */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout #order_comments {
  height: 47px !important;
  padding: 12px 14px !important;
  border: 1px solid #C9CFDB !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  color: #1B2A4A !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Las notas son un área de texto: misma caja, más alta. */
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout #order_comments {
  height: auto !important;
  min-height: 96px !important;
  resize: vertical !important;
}

.woocommerce-checkout .form-row input[type="text"]:focus,
.woocommerce-checkout .form-row input[type="email"]:focus,
.woocommerce-checkout .form-row input[type="tel"]:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout #order_comments:focus {
  border-color: #00B047 !important;
  box-shadow: 0 0 0 2px rgba(0, 176, 71, .15) !important;
}

/* Selects a la misma altura que los campos de texto. */
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row select.select {
  height: 47px !important;
}
/* El contenedor de Select2 venía con padding 10px y el texto con
   line-height 45px: se sumaban y el texto caía 10px bajo el centro. Con flex
   se centra sin depender de esos números. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 47px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;
  padding: 0 34px 0 14px !important;
  height: auto !important;
  width: 100% !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 47px !important;
  top: 0 !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Casilla de términos con el verde de la marca (venía en #2ECC71). */
.woocommerce-checkout #terms,
.woocommerce-checkout .woocommerce-form__input-checkbox,
.woocommerce-checkout input[type="checkbox"] {
  accent-color: #00B047 !important;
  width: 18px !important;
  height: 18px !important;
}

/* Bloque del método de pago: misma caja que el resto del resumen. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method,
.woocommerce-checkout #payment .wc_payment_method {
  border: 1px solid #E3E6EE !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  background: #fff !important;
}
.woocommerce-checkout #payment .wc_payment_method label {
  font-size: 14px !important;
  color: #1B2A4A !important;
}

/* Placeholder de ejemplo: tiene que leerse como pista, no como valor. */
.woocommerce-checkout .form-row input::placeholder,
.woocommerce-checkout .form-row textarea::placeholder,
.woocommerce-checkout #order_comments::placeholder {
  color: #8A93A8 !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

/* Ayuda del RUT: WooCommerce imprime el <span class="description"> pero lo
   deja oculto, así que la explicación de la factura no se leía. */
#billing_rut_empresa-description,
#shipping_rut_empresa-description {
  display: block !important;
  margin-top: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #6B7488 !important;
}
/* app.min.css dibuja un triángulo de tooltip sobre .description::before. */
#billing_rut_empresa-description::before,
#billing_rut_empresa-description::after,
#shipping_rut_empresa-description::before,
#shipping_rut_empresa-description::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* Caja que explica el método de pago elegido. Traía fondo gris y un triángulo
   de globo; queda como nota dentro de la misma tarjeta. */
.woocommerce-checkout #payment .payment_box {
  background: #F7F9FC !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  margin: 10px 0 0 !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: #4A5568 !important;
}
.woocommerce-checkout #payment .payment_box::before {
  display: none !important;
  content: none !important;
}
.woocommerce-checkout #payment .payment_box p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Datos de la transferencia.
   WooCommerce los imprime como `ul.order_details`, que trae columnas
   horizontales y bordes punteados en `::before`/`::after`. Acá se lee como
   una ficha vertical: etiqueta a la izquierda, dato a la derecha. */
ul.wc-bacs-bank-details,
.wc-bacs-bank-details.order_details {
  display: block !important;
  list-style: none !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  overflow: visible !important;
}
.wc-bacs-bank-details li {
  display: grid !important;
  grid-template-columns: 210px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: baseline !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #E3E6EE !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #1B2A4A !important;
  text-align: left !important;
}
.wc-bacs-bank-details li:last-child { border-bottom: 0 !important; }
.wc-bacs-bank-details li::before,
.wc-bacs-bank-details li::after,
.wc-bacs-bank-details.order_details::before,
.wc-bacs-bank-details.order_details::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
.wc-bacs-bank-details li strong {
  font-weight: 500 !important;
  color: #6B7488 !important;
  text-transform: none !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
}
.wc-bacs-bank-details-account-name {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1B2A4A !important;
  margin: 0 0 4px !important;
  text-transform: none !important;
}