/*
 * checkout.css — el camino del dinero: carrito, caja y metodos de pago.
 *
 * Vive aparte de commerce.css a proposito: commerce.css viste el catalogo y la
 * ficha del producto; esto viste los tres ultimos pasos, los que cobran. Se
 * carga despues de todo lo de tienda, asi que gana los empates de especificidad
 * contra el CSS propio de WooCommerce sin necesidad de !important.
 */

/* ---------------------------------------------------------------------------
   WooCommerce trae su propio morado (#7f54b3) y su lila (#dcd7e2), y los pone
   justo donde mas se ven: el boton que cobra y la caja donde va el numero de
   SINPE. El cliente venia siguiendo el azul de la tienda desde la portada y
   en el ultimo paso se topaba el color de otra marca.

   Contraste medido del primario con texto blanco: 5,8:1, por encima del
   4,5:1 que pide la WCAG 2.1 AA para texto normal.
   --------------------------------------------------------------------------- */

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
  background: var(--sgc-red);
  border: 2px solid var(--sgc-red);
  border-radius: var(--sgc-radius);
  color: var(--sgc-white);
  font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover {
  background: var(--sgc-red-dark);
  border-color: var(--sgc-red-dark);
  color: var(--sgc-white);
}

/* Sin esto, quien navega con el teclado no ve donde esta parado. */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce-page a.button:focus-visible,
.woocommerce-page button.button:focus-visible,
.woocommerce-page input.button:focus-visible {
  box-shadow: 0 0 0 3px rgb(0 109 153 / 30%);
  outline: 2px solid var(--sgc-red);
  outline-offset: 2px;
}

/* WooCommerce deja el boton deshabilitado morado al 50%: se sigue leyendo como
   "tocame". Gris solido dice mejor que todavia no. */
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce-page button.button.alt:disabled,
.woocommerce-page button.button.alt:disabled[disabled] {
  background: var(--sgc-silver);
  border-color: var(--sgc-silver);
  color: var(--sgc-white);
  cursor: not-allowed;
  opacity: 1;
}

/* Secundarios del carrito (aplicar cupon, actualizar): el gris lila de
   WooCommerce competia con el boton principal. Neutros, y se tiñen de marca
   solo al pasar el mouse. */
.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button,
.woocommerce-cart .woocommerce input.button,
.woocommerce-checkout .woocommerce a.button,
.woocommerce-checkout .woocommerce button.button,
.woocommerce-checkout .woocommerce input.button {
  background: var(--sgc-white);
  border: 2px solid var(--sgc-border);
  border-radius: var(--sgc-radius);
  color: var(--sgc-text);
  font-weight: 600;
}

.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .woocommerce button.button:hover,
.woocommerce-cart .woocommerce input.button:hover,
.woocommerce-checkout .woocommerce a.button:hover,
.woocommerce-checkout .woocommerce button.button:hover,
.woocommerce-checkout .woocommerce input.button:hover {
  background: var(--sgc-white);
  border-color: var(--sgc-red);
  color: var(--sgc-red);
}

/* El boton que cobra manda: el unico relleno de marca de la pantalla. */
.woocommerce-cart .woocommerce a.button.alt,
.woocommerce-cart .woocommerce button.button.alt,
.woocommerce-checkout .woocommerce a.button.alt,
.woocommerce-checkout .woocommerce button.button.alt,
.woocommerce-checkout #place_order {
  background: var(--sgc-red);
  border-color: var(--sgc-red);
  color: var(--sgc-white);
  font-weight: 700;
}

.woocommerce-cart .woocommerce a.button.alt:hover,
.woocommerce-cart .woocommerce button.button.alt:hover,
.woocommerce-checkout .woocommerce a.button.alt:hover,
.woocommerce-checkout .woocommerce button.button.alt:hover,
.woocommerce-checkout #place_order:hover {
  background: var(--sgc-red-dark);
  border-color: var(--sgc-red-dark);
  color: var(--sgc-white);
}

/* Las instrucciones de cada metodo venian sobre lila con texto gris. Ahi va el
   numero de SINPE y la cuenta: tiene que leerse como un dato, no como una nota
   al pie. */
.woocommerce-checkout #payment div.payment_box {
  background: var(--sgc-white);
  border: 1px solid var(--sgc-border);
  border-left: 4px solid var(--sgc-red);
  border-radius: var(--sgc-radius-sm);
  color: var(--sgc-text);
  font-size: 0.92rem;
  line-height: 1.6;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--sgc-white) !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  color: var(--sgc-text);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   La nota de la opcion "mando mi mensajero". Sale SOLO cuando esa opcion esta
   elegida: una advertencia permanente al lado de algo que el cliente todavia no
   escogio se lee como un reproche, y ahi el carrito se abandona.

   Sin :has() el navegador la deja siempre visible, que es peor pero no rompe
   nada. Con :has() (Chrome, Safari y Firefox desde 2023) aparece al elegirla.
   --------------------------------------------------------------------------- */

.sgc-envio-nota {
  background: var(--sgc-canvas);
  border: 1px solid var(--sgc-border);
  border-left: 3px solid var(--sgc-red);
  border-radius: var(--sgc-radius-sm);
  color: var(--sgc-text);
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 8px 0 4px;
  padding: 10px 12px;
}

.sgc-envio-nota__titulo {
  font-size: 0.86rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.sgc-envio-nota__texto {
  margin: 0 0 4px;
}

.sgc-envio-nota__pie {
  color: var(--sgc-muted);
  font-size: 0.78rem;
  margin: 0;
}

@supports selector(:has(*)) {
  ul.woocommerce-shipping-methods li .sgc-envio-nota,
  #shipping_method li .sgc-envio-nota {
    display: none;
  }

  ul.woocommerce-shipping-methods li:has(input.shipping_method:checked) .sgc-envio-nota,
  #shipping_method li:has(input.shipping_method:checked) .sgc-envio-nota {
    display: block;
  }

  /* The saving for one parcel is the sales hook: it shows BEFORE the customer picks Correos. */
  ul.woocommerce-shipping-methods li .sgc-envio-nota--ahorro,
  #shipping_method li .sgc-envio-nota--ahorro {
    display: block;
  }
}

.sgc-envio-nota--ahorro {
  border-left-color: #1a7f37;
}


/* ---------------------------------------------------------------------------
   "¿Ya tienes cuenta?" y "¿Tienes un cupón?" median 21 px de alto: por debajo
   del minimo de 24x24 que pide la WCAG 2.2 para un objetivo tactil, y son los
   dos enlaces que la gente busca con el pulgar en la caja.
   --------------------------------------------------------------------------- */

.woocommerce-form-coupon-toggle .showcoupon,
.woocommerce-form-login-toggle .showlogin,
.woocommerce-info .showcoupon,
.woocommerce-info .showlogin {
  display: inline-block;
  min-height: 24px;
  padding: 4px 2px;
  text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   ACOMODO DEL CARRITO Y LA CAJA — dos columnas con el resumen fijo.

   Medido en 1920x1080 antes de tocarlo: un carrito de UN articulo ocupaba
   1.931 px de alto, casi dos pantallas, y el bloque de totales se estiraba a
   los 1.136 px del contenedor con su caja de 520 px pegada a la derecha: unos
   600 px vacios al lado. El titulo "Carrito" median 56 px y "Total del
   carrito" 44 px, mas grandes que cualquier dato de la pagina.

   El patron de dos columnas con el resumen pegajoso es el de cualquier tienda
   grande hoy: los articulos a la izquierda, el dinero y el boton siempre a la
   vista a la derecha, sin tener que volver a subir.
   --------------------------------------------------------------------------- */

/* commerce.css ya lo pone en clamp(2.25rem, 5vw, 3.5rem) con dos clases: hay que igualar
   la especificidad para ganarle sin recurrir a !important. En la caja el titulo de la
   pagina no compite con el precio. */
.woocommerce-cart .sgc-entry__header h1,
.woocommerce-checkout .sgc-entry__header h1 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin-bottom: 1.25rem;
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
}

@media (min-width: 992px) {
  .woocommerce-cart .woocommerce {
    align-items: start;
    column-gap: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .woocommerce-cart .woocommerce > .omega-purchase-progress,
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }

  .woocommerce-cart .woocommerce-cart-form {
    grid-column: 1;
    margin-bottom: 0;
  }

  .woocommerce-cart .cart-collaterals {
    grid-column: 2;
    width: 100%;
  }

  .woocommerce-cart .cart-collaterals .cart_totals {
    float: none;
    /* Que el dinero y el boton no se vayan de la vista al bajar por la lista. */
    position: sticky;
    top: 1.5rem;
    width: 100%;
  }

  .woocommerce-checkout form.checkout {
    align-items: start;
    column-gap: 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .woocommerce-checkout form.checkout > #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
  }

  .woocommerce-checkout form.checkout > #customer_details .col-1,
  .woocommerce-checkout form.checkout > #customer_details .col-2 {
    float: none;
    width: 100%;
  }

  .woocommerce-checkout form.checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 1;
  }

  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 1.5rem;
    width: 100%;
  }
}

/* El resumen se lee como un panel, no como una tabla suelta al lado. */
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--sgc-white);
  border: 1px solid var(--sgc-border);
  border-radius: var(--sgc-radius);
  padding: 1.25rem;
}


/* ---------------------------------------------------------------------------
   DENTRO DEL RESUMEN: las filas dejan de ser dos columnas.

   WooCommerce arma el resumen con una tabla de etiqueta a la izquierda y valor
   a la derecha. Eso funciona en 1.100 px de ancho; en el panel de 360 px la
   columna del valor queda en unos 200 px, y ahi "Correos de Costa Rica (Rural
   - Paquete Pequeño): ₡4.000,00" se parte en tres renglones y las opciones de
   envio quedan en tiras de cuatro palabras.

   Subtotal y Total siguen siendo etiqueta y monto en la misma linea, que es
   como se leen. La fila de envio pasa a ocupar el ancho entero: el titulo
   arriba y las opciones debajo, sin partirse.
   --------------------------------------------------------------------------- */

.cart_totals table.shop_table tr,
.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  border-left: 0;
  border-right: 0;
}

.cart_totals table.shop_table .cart-subtotal,
.cart_totals table.shop_table .order-total {
  align-items: baseline;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.cart_totals table.shop_table .cart-subtotal th,
.cart_totals table.shop_table .cart-subtotal td,
.cart_totals table.shop_table .order-total th,
.cart_totals table.shop_table .order-total td {
  display: block;
  padding-left: 0;
  padding-right: 0;
  text-align: right;
  width: auto;
}

.cart_totals table.shop_table .cart-subtotal th,
.cart_totals table.shop_table .order-total th {
  text-align: left;
}

.cart_totals table.shop_table .woocommerce-shipping-totals {
  display: block;
}

.cart_totals table.shop_table .woocommerce-shipping-totals th,
.cart_totals table.shop_table .woocommerce-shipping-totals td {
  display: block;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  width: 100%;
}

.cart_totals table.shop_table .woocommerce-shipping-totals th {
  padding-bottom: 0.25rem;
}

/* Cada opcion de envio como una linea con su punto, no como un parrafo suelto. */
.cart_totals ul.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart_totals ul.woocommerce-shipping-methods li {
  margin: 0 0 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.cart_totals ul.woocommerce-shipping-methods li input.shipping_method {
  left: 0;
  margin: 0;
  position: absolute;
  top: 0.25rem;
}

.cart_totals ul.woocommerce-shipping-methods li label {
  display: block;
  line-height: 1.45;
}

/* La nota vuelve al margen del panel: dentro de la sangria del radio se queda sin ancho. */
.cart_totals ul.woocommerce-shipping-methods li > div[class$="-envio-nota"] {
  margin-left: -1.5rem;
}


/* ---------------------------------------------------------------------------
   LA OPCION ELEGIDA SE VE ELEGIDA, y los precios se comparan de un vistazo.

   Las tres opciones se distinguian solo por el puntito del radio. Es el error
   que termina en alguien pagando un envio que creia haber cambiado. Y los
   precios caian donde terminaba cada texto, asi que no habia columna que
   comparar.
   --------------------------------------------------------------------------- */

.cart_totals ul.woocommerce-shipping-methods li,
.woocommerce-checkout ul.woocommerce-shipping-methods li {
  border: 1px solid transparent;
  border-radius: var(--sgc-radius-sm);
  padding: 0.5rem 0.6rem 0.5rem 1.75rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cart_totals ul.woocommerce-shipping-methods li input.shipping_method,
.woocommerce-checkout ul.woocommerce-shipping-methods li input.shipping_method {
  left: 0.5rem;
  top: 0.75rem;
}

/* woocommerce.css fija el display de esta etiqueta desde un selector con ID
   (.woocommerce ul#shipping_method li label), que le gana a cualquier combinacion de
   clases. Se repite el ID para empatar la especificidad y ganar por orden de carga. */
.woocommerce ul#shipping_method li label,
.cart_totals ul.woocommerce-shipping-methods li label,
.woocommerce-checkout ul.woocommerce-shipping-methods li label {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

[class$="-envio-nombre"] {
  flex: 1 1 auto;
  min-width: 0;
}

[class$="-envio-precio"] {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

[class$="-envio-gratis"] {
  color: var(--sgc-success);
  font-weight: 700;
}

@supports selector(:has(*)) {
  .cart_totals ul.woocommerce-shipping-methods li:has(input.shipping_method:checked),
  .woocommerce-checkout ul.woocommerce-shipping-methods li:has(input.shipping_method:checked) {
    background: var(--sgc-canvas);
    border-color: var(--sgc-red);
  }
}

/* La direccion se guarda como la escribio el cliente y salia "alajuela, aaa, Guatuso".
   Solo el <strong>: WooCommerce reusa este parrafo para el aviso "las opciones de envio se
   actualizaran durante el pago", y capitalizar una frase entera se lee peor todavia. */
.woocommerce-shipping-destination strong {
  text-transform: capitalize;
}

/* La nota vuelve a alinearse con el texto de la opcion, no con el radio. */
.cart_totals ul.woocommerce-shipping-methods li > div[class$="-envio-nota"],
.woocommerce-checkout ul.woocommerce-shipping-methods li > div[class$="-envio-nota"] {
  margin-left: 0;
  margin-top: 0.6rem;
}


/* ---------------------------------------------------------------------------
   EL CARRITO EN EL TELEFONO — el articulo pasa a ser una tarjeta.

   Medido en 375x812: la fila apilada por defecto de WooCommerce gasta una
   pantalla entera en UN articulo. Pone la equis sola en una fila vacia y luego
   "Producto:", "Precio:", "Cantidad:" y "Subtotal:" cada una en su renglon,
   con la miniatura perdida. Quien compra desde el telefono ve un formulario,
   no su compra.

   Aca la fila se arma como tarjeta: foto a la izquierda, nombre arriba, la
   equis en su esquina y el dinero en una sola linea debajo.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item {
    align-items: start;
    border: 1px solid var(--sgc-border);
    border-radius: var(--sgc-radius);
    column-gap: 0.75rem;
    display: grid;
    grid-template-areas:
      "foto nombre borrar"
      "foto precio precio"
      "foto cantidad subtotal";
    grid-template-columns: 72px minmax(0, 1fr) auto;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td {
    border: 0;
    display: block;
    padding: 0;
    text-align: left;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-thumbnail {
    display: block;
    grid-area: foto;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-thumbnail img {
    border-radius: var(--sgc-radius-sm);
    width: 72px;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-name {
    font-weight: 600;
    grid-area: nombre;
    line-height: 1.35;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-remove {
    grid-area: borrar;
    text-align: right;
  }

  /* Cada dato en su celda: apilados en una sola area se pisaban unos a otros. */
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-price,
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-quantity,
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-subtotal {
    align-self: center;
    margin-top: 0.6rem;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-price {
    grid-area: precio;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-quantity {
    grid-area: cantidad;
    margin-top: 0.35rem;
  }

  /* El unitario en gris y en su propia linea: con cantidad 1 repite el subtotal, y
     apretarlo en la misma fila era lo que estaba cortando los montos. */
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-price {
    color: var(--sgc-muted);
    margin-top: 0.35rem;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-subtotal {
    font-weight: 700;
    grid-area: subtotal;
    text-align: right;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-quantity .qty {
    max-width: 56px;
    padding: 0.35rem;
    text-align: center;
  }

  /* Los rotulos "Producto:", "Precio:" sobran cuando el dato ya se explica solo. */
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-name::before,
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-thumbnail::before,
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-remove::before,
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-price::before,
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-quantity::before,
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-subtotal::before {
    content: none;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-remove a.remove {
    font-size: 1.35rem;
    line-height: 1;
  }

  /* En el resumen, WooCommerce repite el rotulo con data-title: "Subtotal  Subtotal: ₡..."
     La fila ya tiene su etiqueta a la izquierda, asi que el rotulo sobra. Se repite el
     selector .shop_table_responsive para empatarle a la regla que lo pone. */
  .cart_totals table.shop_table_responsive tr td::before,
  .cart_totals table.shop_table_responsive tr th::before,
  .cart_totals table.shop_table td::before,
  .cart_totals table.shop_table th::before {
    content: none;
  }

  /* El renglon del dinero en 375 px: la caja de cantidad y los dos montos tienen que
     entrar en los 267 px que quedan al lado de la foto, sin que el subtotal se corte. */
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-price,
  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-subtotal {
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .woocommerce-cart table.shop_table_responsive tbody tr.cart_item td.product-quantity .qty {
    max-width: 48px;
    padding: 0.3rem 0.15rem;
  }
}


/* ---------------------------------------------------------------------------
   EL RESUMEN DE LA CAJA ("Tu pedido"). Medido el 2026-09-03 en la tienda gemela
   con esta misma hoja: en 375 px el nombre del producto caia en una columna de
   100 px (cinco renglones) y cada opcion de envio se apretaba en 120 px, siete
   renglones por opcion. En escritorio, dentro del panel de 400 px, la fila de
   envio seguia partida en dos columnas de 100 y 200 px.

   La tabla pasa a bloques: si solo la fila de envio se vuelve bloque, el navegador
   la mete en una celda anonima de la PRIMERA columna y queda en 269 px dentro de
   un panel de 400 (medido). Con todas las filas como flex no hay columnas que la
   aprieten.
   --------------------------------------------------------------------------- */

.woocommerce-checkout #order_review table.shop_table,
.woocommerce-checkout #order_review table.shop_table thead,
.woocommerce-checkout #order_review table.shop_table tbody,
.woocommerce-checkout #order_review table.shop_table tfoot {
  display: block;
  width: 100%;
}

.woocommerce-checkout #order_review table.shop_table tr {
  align-items: baseline;
  border-top: 1px solid var(--sgc-border);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.woocommerce-checkout #order_review table.shop_table thead tr {
  border-top: 0;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  border: 0;
  display: block;
  padding-left: 0;
  padding-right: 0;
}

.woocommerce-checkout #order_review table.shop_table tr > :first-child {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* Solo en las filas de dos columnas: la de envio se maneja aparte, y white-space se hereda. */
.woocommerce-checkout #order_review table.shop_table tr:not(.woocommerce-shipping-totals) > :last-child:not(:first-child) {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

/* La fila de envio: titulo arriba, opciones debajo, a todo el ancho del panel. */
.woocommerce-checkout #order_review table.shop_table .woocommerce-shipping-totals {
  display: block;
}

.woocommerce-checkout #order_review table.shop_table .woocommerce-shipping-totals th,
.woocommerce-checkout #order_review table.shop_table .woocommerce-shipping-totals td {
  text-align: left;
  white-space: normal;
  width: 100%;
}

.woocommerce-checkout #order_review table.shop_table .woocommerce-shipping-totals th {
  padding-bottom: 0.25rem;
}


/* ---------------------------------------------------------------------------
   "¿Ya tenés cuenta?" y "¿Tenés un cupón?" venian como dos avisos de WooCommerce,
   cada uno con su icono azul y su caja gris con borde: en el telefono, media
   pantalla de aviso antes del primer campo. Son dos enlaces y se ven como tal.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: transparent;
  border: 0;
  color: var(--sgc-muted);
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
  padding: 0;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: none;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--sgc-red);
  font-weight: 600;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: 1.5rem;
}


/* "Código de cupón" salia cortado en "Código d": WooCommerce fija ese campo en
   80 px en escritorio. En el telefono su regla del 48% ya funciona y se respeta. */
@media (min-width: 768px) {
  .woocommerce-cart table.cart td.actions .coupon .input-text {
    min-width: 11rem;
    width: auto;
  }
}